Vue實(shí)現(xiàn)動(dòng)態(tài)控制表格列的顯示和隱藏
更新時(shí)間：2022年04月11日 16:23:13 作者：禿頭程序員
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)動(dòng)態(tài)控制表格列的顯示和隱藏，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了Vue實(shí)現(xiàn)動(dòng)態(tài)控制表格列的顯示和隱藏的具體代碼，供大家參考，具體內(nèi)容如下
效果如圖：
表頭標(biāo)題是重復(fù)的、為了能看到滾動(dòng)效果
v-if=“lists[0].ispass” 來(lái)判斷表格列的狀態(tài)每一列是否顯示或隱藏 勾選則展示、取消勾選隱藏、默認(rèn)勾選
<el-dropdown :hide-on-click="false"> ? ? ? ? ? ? <i class="iconfont icon-shaixuan" ></i> ? ? ? ? ? ? <el-dropdown-menu slot="dropdown" > ? ? ? ? ? ? ? <el-scrollbar style="height: 60vh">//作用是數(shù)據(jù)過(guò)多把表單數(shù)據(jù)的整體高度固定、多出的區(qū)域可以下拉展示 ? ? ? ? ? ? ? ? <el-checkbox-group v-model="check"> ? ? ? ? ? ? ? ? ? <el-dropdown-item v-for="(item,index) in checkList" :key="index"><el-checkbox :label="item" :key="item"></el-checkbox> ? ? ? ? ? ? ? ? ? </el-dropdown-item> ? ? ? ? ? ? ? ? </el-checkbox-group> ? ? ? ? ? ? ? </el-scrollbar> ? ? ? ? ? ? </el-dropdown-menu> </el-dropdown> <el-table :data="institutionalTypeList" border align="center" v-loading="listLoading" style="width: 100%;" :header-cell-style="tableBg"> ? ? ? ? <af-table-column type="index" :index="indexMethod" label="序號(hào)" width="90"> ? ? ? ? </af-table-column> ? ? ? ? <af-table-column v-if="lists[0].ispass" prop="id" label="編碼" > ? ? ? ? </af-table-column> ? ? ? ? <af-table-column v-if="lists[1].ispass" prop="name" label="名稱" > ? ? ? ? </af-table-column> ? ? ? ? <af-table-column v-if="lists[2].ispass" prop="updatetime" label="更新時(shí)間" > ? ? ? ? </af-table-column> </el-table>
lists是所有表頭標(biāo)題，check是多選框默認(rèn)全選，checkList也是所有表頭標(biāo)題、跟多選框綁定的
data() {
? ? ? return {
? ? ? ? check:['編碼','名稱','更新時(shí)間'],
? ? ? ? checkList:['編碼','名稱','更新時(shí)間'],
? ? ? ? lists:[
? ? ? ? ? {label:'編碼',ispass:true},
? ? ? ? ? {label:'名稱',ispass:true},
? ? ? ? ? {label:'更新時(shí)間',ispass:true},
? ? ? ? ],
? ? ? }
},動(dòng)態(tài)監(jiān)聽(tīng)值選中的選項(xiàng)
watch:{
? ? ? check(newVal){
? ? ? ? ? ? if (newVal) {
? ? ? ? ? ? ? var arr = this.checkList.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í)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
Vue 按照創(chuàng)建時(shí)間和當(dāng)前時(shí)間顯示操作(剛剛,幾小時(shí)前,幾天前)
這篇文章主要介紹了Vue 按照創(chuàng)建時(shí)間和當(dāng)前時(shí)間顯示操作(剛剛,幾小時(shí)前,幾天前)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-09-09
Vue使用lodash進(jìn)行防抖節(jié)流的實(shí)現(xiàn)
本文主要介紹了Vue使用lodash進(jìn)行防抖節(jié)流的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-04-04
Vue移動(dòng)端實(shí)現(xiàn)圖片上傳及超過(guò)1M壓縮上傳
這篇文章主要為大家詳細(xì)介紹了Vue移動(dòng)端實(shí)現(xiàn)圖片上傳及超過(guò)1M壓縮上傳，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-12-12
Vue3使用MD5加密實(shí)戰(zhàn)案例(清晰明了)
MD5是一種信息摘要算法(對(duì)稱加密),一種被廣泛使用的密碼散列函數(shù),可以產(chǎn)生出一個(gè)128位(16字節(jié))的散列值,用來(lái)確保信息傳輸完整一致性,這篇文章主要給大家介紹了關(guān)于Vue3使用MD5加密的相關(guān)資料,需要的朋友可以參考下2023-05-05
這篇文章主要介紹了Vue懸浮窗和聚焦登錄組件經(jīng)驗(yàn)總結(jié),? 本文整理了實(shí)現(xiàn)懸浮窗以及聚焦登錄組件的功能，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-11-11
詳談vue+webpack解決css引用圖片打包后找不到資源文件的問(wèn)題
下面小編就為大家分享一篇詳談vue+webpack解決css引用圖片打包后找不到資源文件的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-03-03
這篇文章主要介紹了element-ui如何防止重復(fù)提交的方法步驟，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-12-12
vuex提交state&&實(shí)時(shí)監(jiān)聽(tīng)state數(shù)據(jù)的改變方法
今天小編就為大家分享一篇vuex提交state&&實(shí)時(shí)監(jiān)聽(tīng)state數(shù)據(jù)的改變方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
全局安裝 Vue cli3 和 繼續(xù)使用 Vue-cli2.x操作
這篇文章主要介紹了全局安裝 Vue cli3 和 繼續(xù)使用 Vue-cli2.x操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-09-09
這篇文章主要介紹了Vue組件化通訊的實(shí)例代碼的相關(guān)資料,需要的朋友可以參考下2017-06-06