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