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)聽值選中的選項(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)文章
這篇文章主要為大家介紹了vue3中如何使用shaka-player示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-09-09
Vuex的基本概念、項(xiàng)目搭建以及入坑點(diǎn)
Vuex是一個(gè)專門為Vue.js應(yīng)用程序開發(fā)的狀態(tài)管理模式，這篇文章主要介紹了Vuex的基本概念、項(xiàng)目搭建以及入坑點(diǎn)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-11-11
Vue?編程式路由導(dǎo)航的實(shí)現(xiàn)示例
本文主要介紹了Vue?編程式路由導(dǎo)航2022-04-04
vue項(xiàng)目打包之后接口出現(xiàn)錯(cuò)誤的問(wèn)題及解決
這篇文章主要介紹了vue項(xiàng)目打包之后接口出現(xiàn)錯(cuò)誤的問(wèn)題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
你們是否聽說(shuō)過(guò)Vue3的組合式API？它可是Vue3的新玩法，把以前的Vue2組件函數(shù)轉(zhuǎn)化為了函數(shù)組件。好了，今天我要和大家分享的是如何在組合式API中使用ref()函數(shù)，感興趣的朋友跟隨小編一起看看吧2023-06-06
vue項(xiàng)目打包并部署到Linux服務(wù)器的詳細(xì)過(guò)程
我們?cè)跁?huì)開發(fā)項(xiàng)目的同時(shí),也應(yīng)該了解一下項(xiàng)目是如何部署到服務(wù)器的,下面這篇文章主要給大家介紹了關(guān)于vue項(xiàng)目打包并部署到Linux服務(wù)器的相關(guān)資料,需要的朋友可以參考下2023-01-01
這篇文章主要介紹了vue如何將對(duì)象中所有的key賦為空值，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
使用vue3.2實(shí)現(xiàn)多頁(yè)簽導(dǎo)航
這篇文章主要為大家詳細(xì)介紹了如何使用vue3.2 + elementPlus + pinia 實(shí)現(xiàn)多頁(yè)簽導(dǎo)航,文中的示例代碼講解詳細(xì),有需要的小伙伴可以參考一下2023-12-12
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)懸浮球效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
el-form表單驗(yàn)證的一些實(shí)用方法總結(jié)
表單校驗(yàn)是注冊(cè)環(huán)節(jié)中必不可少的操作,表單校驗(yàn)通過(guò)一定的規(guī)則來(lái)確保用戶提交數(shù)據(jù)的有效性,下面這篇文章主要給大家介紹了關(guān)于el-form表單驗(yàn)證的一些實(shí)用方法,需要的朋友可以參考下2023-01-01