vue實現(xiàn)下拉框篩選表格數(shù)據(jù)

更新時間：2022年09月05日 15:51:27 作者：程序媛na

這篇文章主要為大家詳細介紹了vue實現(xiàn)下拉框篩選表格數(shù)據(jù)，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了vue實現(xiàn)下拉框篩選表格數(shù)據(jù)的具體代碼，供大家參考，具體內(nèi)容如下

html中：

//下拉框 ?
? ? ? ?<el-form-item label="選擇區(qū)域">
? ? ? ? <el-select v-model="chick" clearable placeholder="請選擇">
? ? ? ? ? <el-option
? ? ? ? ? ? v-for="item in options"
? ? ? ? ? ? :key="item.value"
? ? ? ? ? ? :label="item.label"
? ? ? ? ? ? :value="item.value">
? ? ? ? ? </el-option>
? ? ? ? </el-select>
? ? ? </el-form-item>
? ? ? //表格 ??
? ? ?<el-table :data="datalist" >
? ? ? <el-table-column label="大區(qū)" align="center" prop="area" ?/>
? ? ? <el-table-column label="片區(qū)" align="center" prop="pianqu" v-if="display_pq"/>
? ? ? <el-table-column label="渠道" align="center" prop="channelName" v-if="display_qd"/>
? ? </el-table>

data中：

display_pq:true,
display_qd:true, ? ? ? ??
? ? ? ?options: [{
? ? ? ? ? value: '選項1',
? ? ? ? ? label: '片區(qū)'
? ? ? ? }, {
? ? ? ? ? value: '選項2',
? ? ? ? ? label: '渠道'
? ? ? ? }],
? ? ? ? chick: ''

methods:

?getList() {
? ? ? listEffect_sales(this.queryParams).then((response) => {
? ? ? ? this.effect_salesList = response.rows;
? ? ? ? this.total = response.total;
? ? ? ? this.datalist = [];
? ? ? ? this.effect_salesList.forEach((d) => {
? ? ? ? this.datalist.push(d);
? ? ? ? });
? ? ? });
? ? },

watch:

watch: {
? ? //選擇區(qū)域
? ? ?chick: function(newVal, oldVal) {
? ? ? if(this.chick == '選項1'){
? ? ? ? this.datalist = [];
? ? ? ? this.effect_salesList.forEach((d) => {
? ? ? ? if(d.reportType == "片區(qū)"){
? ? ? ? ? this.datalist.push(d);
? ? ? ? ? this.display_qd = false;
? ? ? ? ? this.display_pq = true;
? ? ? ? }
? ? ? ? }); ? ?
? ? ? }else if(this.chick == '選項2' ){
? ? ? ? this.datalist = [];
? ? ? ? this.effect_salesList.forEach((d) => {
? ? ? ? if(d.reportType == "渠道") {
? ? ? ? ?this.datalist.push(d);
? ? ? ? ?this.display_qd = true;
? ? ? ? ?this.display_pq = false;
? ? ? ? }
? ? ? ? ?}); ??
? ? ? }else{
? ? ? ? this.datalist = [];
? ? ? ? this.effect_salesList.forEach((d) => {
? ? ? ? this.datalist.push(d);
? ? ? ? this.display_qd = true;
? ? ? ? this.display_pq = true;
? ? ? ? });
? ? ? }
? ? }
? },

結(jié)果：