vue下拉框筛选表格数据
程序媛na 人气:0html中:
//下拉框 <el-form-item label="选择区域"> <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="大区" align="center" prop="area" /> <el-table-column label="片区" 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: '片区' }, { 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: { //选择区域 chick: function(newVal, oldVal) { if(this.chick == '选项1'){ this.datalist = []; this.effect_salesList.forEach((d) => { if(d.reportType == "片区"){ 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; }); } } },
结果:
加载全部内容