vue實(shí)現(xiàn)下拉框篩選表格數(shù)據(jù)
更新時(shí)間：2022年09月05日 15:51:27 作者：程序媛na
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)下拉框篩選表格數(shù)據(jù)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了vue實(shí)現(xiàn)下拉框篩選表格數(shù)據(jù)的具體代碼，供大家參考，具體內(nèi)容如下
html中：
//下拉框 ? ? ? ? ?<el-form-item label="選擇區(qū)域"> ? ? ? ? <el-select v-model="chick" clearable placeholder="請(qǐng)選擇"> ? ? ? ? ? <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: '選項(xiàng)1',
? ? ? ? ? label: '片區(qū)'
? ? ? ? }, {
? ? ? ? ? value: '選項(xiàng)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 == '選項(xiàng)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 == '選項(xiàng)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é)果：
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
關(guān)于element同時(shí)使用Drawer和Dialog出現(xiàn)多個(gè)遮罩問題
這篇文章主要介紹了關(guān)于element同時(shí)使用Drawer和Dialog出現(xiàn)多個(gè)遮罩問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-07-07
Vue中JS動(dòng)畫與Velocity.js的結(jié)合使用
這篇文章主要介紹了Vue中JS動(dòng)畫與Velocity.js的結(jié)合使用，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-02-02
這篇文章主要介紹了vue 授權(quán)獲取微信openId操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-11-11
vue 地圖可視化 maptalks 篇實(shí)例代碼詳解
這篇文章主要介紹了vue 地圖可視化 maptalks 篇，本文分步驟通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下2019-05-05
wangEditor是一個(gè)輕量級(jí)web富文本編輯器,配置方便,使用簡(jiǎn)單,下面這篇文章主要給大家介紹了關(guān)于vue中wangEditor5編輯器的基本使用,文中通過圖文以及實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-03-03
vue2的todolist入門小項(xiàng)目的詳細(xì)解析
本篇文章主要介紹了vue2的todolist入門小項(xiàng)目的詳細(xì)解析，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-05-05
Vue 3中常用的生命周期鉤子和監(jiān)聽器的操作方法
這篇文章主要介紹了Vue 3中常用的生命周期鉤子和監(jiān)聽器的操作方法,分析常用的一些生命周期鉤子和監(jiān)聽器可以幫助我們?cè)诮M件中處理數(shù)據(jù)加載、狀態(tài)變化和響應(yīng)式更新,需要的朋友可以參考下2024-07-07
vue中input標(biāo)簽上傳本地文件或圖片后獲取完整路徑的解決方法
本文給大家介紹vue中input標(biāo)簽上傳本地文件或圖片后獲取完整路徑，如E:\medicineOfCH\stageImage\xxx.jpg，本文給大家分享完美解決方案，感興趣的朋友跟隨小編一起看看吧2023-04-04
這篇文章主要為大家詳細(xì)介紹了如何利用Vue和Echarts實(shí)現(xiàn)繪制餅圖，文中的示例代碼講解詳細(xì)，感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-03-03
這篇文章主要介紹了關(guān)于Vue3中的響應(yīng)式原理，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09