vue elementUI表格控制顯示隱藏對應列的方法
更新時間：2022年04月13日 11:55:53 作者：接口寫好了嗎
這篇文章主要為大家詳細介紹了vue elementUI表格控制顯示隱藏對應列的方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了vue elementUI表格控制顯示隱藏對應列的具體代碼，供大家參考，具體內容如下
需求：后端返回全部列數據。前端根據選項來顯示對應的列，如果不勾選，默認全部隱藏。
效果圖
勾選后顯示對應的列
上代碼
html部分
這里用v-if來顯示隱藏，因為這個elementul組件的原因，v-show不生效，要用v-if
<el-table-column ? ? ? ? v-if="lists[0].ispass" ? ? ? ? ? label="Upper" ? ? ? ? ? prop="db28" ? ? ? ? ? show-overflow-tooltip ? ? ? ? ></el-table-column> ? ? ? ? <el-table-column ? ? ? ? v-if="lists[1].ispass" ? ? ? ? ? label="Lower" ? ? ? ? ? prop="db31" ? ? ? ? ? show-overflow-tooltip ? ? ? ? ></el-table-column> ? ? ? ? <el-table-column ? ? ? ? v-if="lists[2].ispass" ? ? ? ? ? label="UP+LOW" ? ? ? ? ? prop="db34" ? ? ? ? ? show-overflow-tooltip ? ? ? ? ></el-table-column> ? ? ? ? <el-table-column ? ? ? ? v-if="lists[3].ispass" ? ? ? ? ? label="Static" ? ? ? ? ? prop="db36" ? ? ? ? ? key="1" ? ? ? ? ? show-overflow-tooltip ? ? ? ? ></el-table-column> ? ? ? ? <el-table-column ? ? ? ? v-if="lists[4].ispass" ? ? ? ? ? label="LRO-T1 OA" ? ? ? ? ? min-width="90px" ? ? ? ? ? prop="db44" ? ? ? ? ? key="2" ? ? ? ? ? show-overflow-tooltip ? ? ? ? > </el-table-column>
data部分
ispass是用來控制顯示或隱藏的，label是用來判斷的。
lists:[
? ? ? ? ? {label:'Upper',ispass:false},
? ? ? ? ? {label:'Lower',ispass:false},
? ? ? ? ? {label:'UP+LO',ispass:false},
? ? ? ? ? {label:'Static',ispass:false},
? ? ? ? ? {label:'LRO-T1 OA',ispass:false},
? ? ? ? ? {label:'LRO-T2 OA',ispass:false},
? ? ? ? ? {label:'LRO-B1 OA',ispass:false},
? ? ? ? ? {label:'LRO-B2 OA',ispass:false},
? ? ? ? ? {label:'RRO-C OA',ispass:false},
? ? ? ? ? {label:'LRO-T1 Buige',ispass:false},
? ? ? ? ? {label:'LRO-T2 Buige',ispass:false},
? ? ? ? ? {label:'LRO-B1 Buige',ispass:false},
? ? ? ? ? {label:'LRO-B2 Buige',ispass:false},
? ? ? ? ? {label:'LRO-T1 Dent',ispass:false},
? ? ? ? ? {label:'LRO-T2 Dent',ispass:false},
? ? ? ? ? {label:'LRO-B1 Dent',ispass:false},
? ? ? ? ? {label:'LRO-B2 Dent',ispass:false},
? ? ? ? ],
? ? ? ? check:[
? ? ? ? "Upper",
? ? ? ? "Lower",
? ? ? ? "UP+LO",
? ? ? ? "Static",
? ? ? ? "LRO-T1 OA",
? ? ? ? "LRO-T2 OA",
? ? ? ? "LRO-B1 OA",
? ? ? ? "LRO-B2 OA",
? ? ? ? "RRO-C OA",
? ? ? ? "LRO-T1 Buige",
? ? ? ? "LRO-T2 Buige",
? ? ? ? "LRO-B1 Buige",
? ? ? ? "LRO-B2 Buige",
? ? ? ? "LRO-T1 Dent",
? ? ? ? "LRO-T2 Dent",
? ? ? ? "LRO-B1 Dent",
? ? ? ? "LRO-B2 Dent",
? ? ? ],
? ? ? checkList: [
? ? ? ],方法部分
直接用watch監(jiān)聽，復制就行。這里注意checkList和check
checkList：代表你多選框的默認選中，我沒寫就是默認全不選
check：這個也要寫和lists里的label一樣，用來判斷的。
watch:{
? ? ? checkList(newVal){
? ? ? ? ? ? if (newVal) {
? ? ? ? ? ? ? var arr = this.check.filter(i => newVal.indexOf(i) < 0) //未選中
? ? ? ? ? ? ? this.lists.map(i => {
? ? ? ? ? ? ? ? if (arr.indexOf(i.label) !== -1) {
? ? ? ? ? ? ? ? ? i.ispass = false
? ? ? ? ? ? ? ? } else {
? ? ? ? ? ? ? ? ? i.ispass = true
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? })
? ? ? ? ? ? }
? ? ? }
? ? },
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
vue中阻止click事件冒泡,防止觸發(fā)另一個事件的方法
下面小編就為大家分享一篇vue中阻止click事件冒泡,防止觸發(fā)另一個事件的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02
本文主要介紹了Vue3管理后臺項目使用高德地圖選點的實現，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2022-07-07
本篇文章主要介紹了vuejs2.0實現一個簡單的分頁示例，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-02-02
這篇文章主要給大家介紹了關于Vue中forEach()使用方法的相關資料,forEach和map是數組的兩個方法,作用都是遍歷數組,在vue項目的處理數據中經常會用到,需要的朋友可以參考下2023-09-09
watch和computed都是以Vue的依賴追蹤機制為基礎的,當某一個依賴型數據發(fā)生變化的時候,所有依賴這個數據的相關數據會自動發(fā)生變化,即自動調用相關的函數,來實現數據的變動，這篇文章簡單介紹下Vue中computed和watch的區(qū)別異同，感興趣的朋友一起看看吧2023-02-02
這篇文章主要介紹了vue-cli2.9.3 詳細教程，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-04-04
這篇文章主要為大家介紹了vue組件生命周期鉤子使用示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步早日升職加薪2022-04-04
這篇文章主要為大家介紹了vue編譯器util工具使用方法示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-07-07
這篇文章主要介紹了Vue中如何動態(tài)顯示表格內容問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
這篇文章主要介紹了vue父子組件的通信的方法，本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2019-11-11