vue elementUI表格控制顯示隱藏對(duì)應(yīng)列的方法

更新時(shí)間：2022年04月13日 11:55:53 作者：接口寫(xiě)好了嗎

這篇文章主要為大家詳細(xì)介紹了vue elementUI表格控制顯示隱藏對(duì)應(yīng)列的方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了vue elementUI表格控制顯示隱藏對(duì)應(yīng)列的具體代碼，供大家參考，具體內(nèi)容如下

需求：后端返回全部列數(shù)據(jù)。前端根據(jù)選項(xiàng)來(lái)顯示對(duì)應(yīng)的列，如果不勾選，默認(rèn)全部隱藏。

效果圖

勾選后顯示對(duì)應(yīng)的列

上代碼

html部分

這里用v-if來(lái)顯示隱藏，因?yàn)檫@個(gè)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是用來(lái)控制顯示或隱藏的，label是用來(lái)判斷的。

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)聽(tīng)，復(fù)制就行。這里注意checkList和check
checkList：代表你多選框的默認(rèn)選中，我沒(méi)寫(xiě)就是默認(rèn)全不選
check：這個(gè)也要寫(xiě)和lists里的label一樣，用來(lái)判斷的。

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
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? })
? ? ? ? ? ? }
? ? ? }
? ? },

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: