日日操夜夜添-日日操影院-日日草夜夜操-日日干干-精品一区二区三区波多野结衣-精品一区二区三区高清免费不卡

公告:魔扣目錄網(wǎng)為廣大站長提供免費(fèi)收錄網(wǎng)站服務(wù),提交前請做好本站友鏈:【 網(wǎng)站目錄:http://www.ylptlb.cn 】, 免友鏈快審服務(wù)(50元/站),

點(diǎn)擊這里在線咨詢客服
新站提交
  • 網(wǎng)站:51998
  • 待審:31
  • 小程序:12
  • 文章:1030137
  • 會(huì)員:747

Vue組件實(shí)戰(zhàn):數(shù)據(jù)篩選組件開發(fā)

在Vue開發(fā)中,數(shù)據(jù)篩選是常用的功能之一。本文將帶您詳細(xì)了解Vue組件實(shí)戰(zhàn):數(shù)據(jù)篩選組件的開發(fā),通過具體的代碼實(shí)例演示其實(shí)現(xiàn)過程,幫助您深入理解Vue組件的使用方法。

首先,我們需要明確需求,就是開發(fā)一個(gè)數(shù)據(jù)篩選組件,可以在前端進(jìn)行簡單的篩選操作,包括輸入框、多選框、日期選擇、范圍選擇等方式,滿足不同場景下的數(shù)據(jù)篩選需求。

根據(jù)需求,我們可以將組件拆分為以下幾個(gè)部分:

    輸入框篩選

代碼如下:

<template>
  <div class="input-filter">
    <input type="text" v-model="value" placeholder="請輸入關(guān)鍵詞" @input="changeInput">
    <button @click="search">搜索</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: ""
    };
  },
  methods: {
    changeInput(event) {
      this.value = event.target.value;
    },
    search() {
      this.$emit("search", this.value);
    }
  }
};
</script>

<style scoped>
.input-filter {
  display: flex;
  margin-bottom: 10px;
  align-items: center;
  justify-content: center;
}
.input-filter input {
  margin-right: 10px;
  padding: 5px;
  border-radius: 4px;
  border: 1px solid #ccc;
  font-size: 14px;
}
.input-filter button {
  padding: 5px 10px;
  border-radius: 4px;
  background-color: #1989fa;
  color: #fff;
  border: none;
  font-size: 14px;
}
</style>

登錄后復(fù)制

該組件包含一個(gè)輸入框和搜索按鈕,用戶在輸入框中輸入關(guān)鍵詞,點(diǎn)擊搜索按鈕后將觸發(fā)search事件,并傳遞搜索關(guān)鍵詞給父組件。

    多選框篩選

代碼如下:

<template>
  <div class="checkbox-filter">
    <div class="title">{{ title }}</div>
    <el-checkbox-group v-model="checkedList" @change="handleChange">
      <el-checkbox v-for="item in options" :label="item.value" :key="item.value">{{ item.label }}</el-checkbox>
    </el-checkbox-group>
  </div>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      default: ""
    },
    options: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      checkedList: []
    };
  },
  methods: {
    handleChange(checkedList) {
      this.$emit("change", checkedList);
    }
  }
};
</script>

<style scoped>
.checkbox-filter {
  margin-bottom: 10px;
}
.checkbox-filter .title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 5px;
}
</style>

登錄后復(fù)制

該組件包含一個(gè)多選框和一個(gè)標(biāo)題,用戶在多選框中選擇需要篩選的選項(xiàng)后,將觸發(fā)change事件,并傳遞選中的選項(xiàng)給父組件。

    日期選擇篩選

代碼如下:

<template>
  <div class="date-filter">
    <el-row :gutter="10">
      <el-col :span="12">
        <el-date-picker v-model="start" type="date" placeholder="開始日期" @change="handleChange" />
      </el-col>
      <el-col :span="12">
        <el-date-picker v-model="end" type="date" placeholder="結(jié)束日期" @change="handleChange" />
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      start: "",
      end: ""
    };
  },
  methods: {
    handleChange() {
      this.$emit("change", {
        start: this.start,
        end: this.end
      });
    }
  }
};
</script>

<style scoped>
.date-filter {
  margin-bottom: 10px;
}
</style>

登錄后復(fù)制

該組件包含兩個(gè)日期選擇器,用戶可以選擇起始日期和結(jié)束日期,選中后將觸發(fā)change事件,并將選中的日期范圍傳遞給父組件。

    范圍選擇篩選

代碼如下:

<template>
  <div class="range-filter">
    <el-row :gutter="10">
      <el-col :span="12">
        <el-input-number v-model.number="min" controls-position="right" :min="0" :step="1" @change="handleChange" />
      </el-col>
      <el-col :span="12">
        <el-input-number v-model.number="max" controls-position="right" :min="0" :step="1" @change="handleChange" />
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      min: 0,
      max: 0
    };
  },
  methods: {
    handleChange() {
      this.$emit("change", {
        min: this.min,
        max: this.max
      });
    }
  }
};
</script>

<style scoped>
.range-filter {
  margin-bottom: 10px;
}
</style>

登錄后復(fù)制

該組件包含兩個(gè)數(shù)字輸入框,用戶可以選擇數(shù)值范圍,選中后將觸發(fā)change事件,并將選中的范圍傳遞給父組件。

以上四個(gè)組件可以組合起來使用,實(shí)現(xiàn)多維度數(shù)據(jù)的篩選。在父組件中,我們可以將這些子組件結(jié)合起來,完成完整的數(shù)據(jù)篩選功能。

代碼如下:

<template>
  <div class="filter-container">
    <input-filter @search="onSearch" />
    <checkbox-filter :title="title1" :options="options1" @change="onChange1" />
    <date-filter @change="onChange2" />
    <range-filter @change="onChange3" />
  </div>
</template>

<script>
import InputFilter from "./InputFilter.vue";
import CheckboxFilter from "./CheckboxFilter.vue";
import DateFilter from "./DateFilter.vue";
import RangeFilter from "./RangeFilter.vue";

export default {
  components: {
    InputFilter,
    CheckboxFilter,
    DateFilter,
    RangeFilter
  },
  data() {
    return {
      title1: "多選框篩選",
      options1: [
        { label: "選項(xiàng)1", value: 1 },
        { label: "選項(xiàng)2", value: 2 },
        { label: "選項(xiàng)3", value: 3 }
      ]
    };
  },
  methods: {
    onSearch(value) {
      console.log("搜索關(guān)鍵詞:", value);
    },
    onChange1(value) {
      console.log("多選框選中的值:", value);
    },
    onChange2(value) {
      console.log("日期選擇范圍:", value);
    },
    onChange3(value) {
      console.log("范圍選擇范圍:", value);
    }
  }
};
</script>

<style scoped>
.filter-container {
  margin: 20px;
}
</style>

登錄后復(fù)制

這里只是簡單演示了一些篩選組件的示例,您可以根據(jù)實(shí)際需求進(jìn)行組合和擴(kuò)展,豐富您的數(shù)據(jù)篩選能力。

總結(jié)

本文詳細(xì)介紹了Vue組件實(shí)戰(zhàn):數(shù)據(jù)篩選組件的開發(fā),并提供了多個(gè)具體的代碼示例,讓讀者更好地理解Vue組件的使用方法。在日常開發(fā)中,遇到數(shù)據(jù)篩選的需求,可以通過以上組件實(shí)現(xiàn),提高開發(fā)效率和用戶體驗(yàn)。

分享到:
標(biāo)簽:實(shí)戰(zhàn) 開發(fā) 數(shù)據(jù) 篩選 組件
用戶無頭像

網(wǎng)友整理

注冊時(shí)間:

網(wǎng)站:5 個(gè)   小程序:0 個(gè)  文章:12 篇

  • 51998

    網(wǎng)站

  • 12

    小程序

  • 1030137

    文章

  • 747

    會(huì)員

趕快注冊賬號(hào),推廣您的網(wǎng)站吧!
最新入駐小程序

數(shù)獨(dú)大挑戰(zhàn)2018-06-03

數(shù)獨(dú)一種數(shù)學(xué)游戲,玩家需要根據(jù)9

答題星2018-06-03

您可以通過答題星輕松地創(chuàng)建試卷

全階人生考試2018-06-03

各種考試題,題庫,初中,高中,大學(xué)四六

運(yùn)動(dòng)步數(shù)有氧達(dá)人2018-06-03

記錄運(yùn)動(dòng)步數(shù),積累氧氣值。還可偷

每日養(yǎng)生app2018-06-03

每日養(yǎng)生,天天健康

體育訓(xùn)練成績評定2018-06-03

通用課目體育訓(xùn)練成績評定