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è)遮罩問(wèn)題
這篇文章主要介紹了關(guān)于element同時(shí)使用Drawer和Dialog出現(xiàn)多個(gè)遮罩問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-07-07
Vue中JS動(dòng)畫(huà)與Velocity.js的結(jié)合使用
這篇文章主要介紹了Vue中JS動(dòng)畫(huà)與Velocity.js的結(jié)合使用，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2019-02-02
vue 授權(quán)獲取微信openId操作
這篇文章主要介紹了vue 授權(quán)獲取微信openId操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2020-11-11
vue 地圖可視化 maptalks 篇實(shí)例代碼詳解
這篇文章主要介紹了vue 地圖可視化 maptalks 篇，本文分步驟通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下
2019-05-05
vue中wangEditor5編輯器的基本使用
wangEditor是一個(gè)輕量級(jí)web富文本編輯器,配置方便,使用簡(jiǎn)單,下面這篇文章主要給大家介紹了關(guān)于vue中wangEditor5編輯器的基本使用,文中通過(guò)圖文以及實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2023-03-03
vue2的todolist入門(mén)小項(xiàng)目的詳細(xì)解析
本篇文章主要介紹了vue2的todolist入門(mén)小項(xiàng)目的詳細(xì)解析，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-05-05
Vue 3中常用的生命周期鉤子和監(jiān)聽(tīng)器的操作方法
這篇文章主要介紹了Vue 3中常用的生命周期鉤子和監(jiān)聽(tīng)器的操作方法,分析常用的一些生命周期鉤子和監(jiān)聽(tīng)器可以幫助我們?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
Vue+Echarts繪制餅圖的示例詳解
這篇文章主要為大家詳細(xì)介紹了如何利用Vue和Echarts實(shí)現(xiàn)繪制餅圖，文中的示例代碼講解詳細(xì)，感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下
2023-03-03
關(guān)于Vue3中的響應(yīng)式原理
這篇文章主要介紹了關(guān)于Vue3中的響應(yīng)式原理，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-09-09