您现在的位置是:网站首页> 编程资料编程资料
vue实现下拉框筛选表格数据_vue.js_
2023-05-24
413人已围观
简介 vue实现下拉框筛选表格数据_vue.js_
本文实例为大家分享了vue实现下拉框筛选表格数据的具体代码,供大家参考,具体内容如下
html中:
//下拉框//表格
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; }); } } },结果:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
您可能感兴趣的文章:
相关内容
- vue父组件调用子组件方法报错问题及解决_vue.js_
- vue electron实现无边框窗口示例详解_vue.js_
- Vue3 diff算法之双端diff算法详解_vue.js_
- 一文详解Vue3中简单diff算法的实现_vue.js_
- JS函数(普通函数,箭头函数)中this的指向问题详解_javascript技巧_
- 详解Vue路由传参的两种方式query和params_vue.js_
- 利用JavaScript实现创建虚拟键盘的示例代码_javascript技巧_
- React 保留和重置State_React_
- JS获取本机IP地址的2种方法_javascript技巧_
- JavaScript 条件判断使用技巧详解_JavaScript_
