vue+elementUI配置表格的列顯示與隱藏
更新時(shí)間：2022年04月13日 11:29:44 投稿：lijiao
這篇文章主要為大家詳細(xì)介紹了vue+elementUI配置表格的列顯示與隱藏，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
vue+elementUI配置表格的列顯示與隱藏，供大家參考，具體內(nèi)容如下
描述：
表格的列過多時(shí)，可以根據(jù)需要控制列的顯示與隱藏，目前是采用Vue+elementUI（適配Vue3的Element Plus）實(shí)現(xiàn)的，具體效果與代碼如下：
效果圖：
完整代碼：
<template>
? <div id="app">
? ? <el-table :data="tableData" border style="width: 100%" ref="table">
? ? ? <el-table-column
? ? ? ? fixed
? ? ? ? type="index"
? ? ? ? align="center"
? ? ? ? :index="1">
? ? ? ? <template #header>
? ? ? ? ? <el-popover
? ? ? ? ? ? placement="bottom"
? ? ? ? ? ? :width="600"
? ? ? ? ? ? :visible="visible"
? ? ? ? ? >
? ? ? ? ? ? <!-- 配置列面板 -->
? ? ? ? ? ? <transition name="fade">
? ? ? ? ? ? ? <div>
? ? ? ? ? ? ? ? <div>選擇顯示字段</div>
? ? ? ? ? ? ? ? <div>
? ? ? ? ? ? ? ? ? <el-checkbox v-model="showColumn.date" disabled>日期</el-checkbox>
? ? ? ? ? ? ? ? ? <el-checkbox v-model="showColumn.name">姓名</el-checkbox>
? ? ? ? ? ? ? ? ? <el-checkbox v-model="showColumn.provinces">省份</el-checkbox>
? ? ? ? ? ? ? ? ? <el-checkbox v-model="showColumn.city">市區(qū)</el-checkbox>
? ? ? ? ? ? ? ? ? <el-checkbox v-model="showColumn.adreess">地址</el-checkbox>
? ? ? ? ? ? ? ? ? <el-checkbox v-model="showColumn.zipCode">郵編</el-checkbox>
? ? ? ? ? ? ? ? </div>
? ? ? ? ? ? ? </div>
? ? ? ? ? ? </transition>
? ? ? ? ? ? <div style="text-align: right; margin: 0">
? ? ? ? ? ? ? <el-button size="mini" type="text" @click="visible = false">取消</el-button>
? ? ? ? ? ? ? <el-button size="mini" type="primary" plain @click="saveColumn">確定</el-button>
? ? ? ? ? ? </div>
? ? ? ? ? ? <template #reference>
? ? ? ? ? ? ? <i
? ? ? ? ? ? ? ? class="el-icon-setting"
? ? ? ? ? ? ? ? style="font-size: 22px; cursor: pointer"
? ? ? ? ? ? ? ? @click="visible = true"
? ? ? ? ? ? ? ></i>
? ? ? ? ? ? </template>
? ? ? ? ? </el-popover>
? ? ? ? </template>
? ? ? </el-table-column>
? ? ? <el-table-column
? ? ? ? prop="date"
? ? ? ? label="日期"
? ? ? ? width="150"
? ? ? ? v-if="showColumn.date"
? ? ? >
? ? ? </el-table-column>
? ? ? <el-table-column
? ? ? ? prop="name"
? ? ? ? label="姓名"
? ? ? ? width="120"
? ? ? ? v-if="showColumn.name"
? ? ? >
? ? ? </el-table-column>
? ? ? <el-table-column
? ? ? ? prop="province"
? ? ? ? label="省份"
? ? ? ? width="120"
? ? ? ? v-if="showColumn.provinces"
? ? ? >
? ? ? </el-table-column>
? ? ? <el-table-column
? ? ? ? prop="city"
? ? ? ? label="市區(qū)"
? ? ? ? width="120"
? ? ? ? v-if="showColumn.city"
? ? ? >
? ? ? </el-table-column>
? ? ? <el-table-column
? ? ? ? prop="address"
? ? ? ? label="地址"
? ? ? ? minWidth="300"
? ? ? ? v-if="showColumn.adreess"
? ? ? >
? ? ? </el-table-column>
? ? ? <el-table-column
? ? ? ? prop="zip"
? ? ? ? label="郵編"
? ? ? ? width="120"
? ? ? ? v-if="showColumn.zipCode"
? ? ? >
? ? ? </el-table-column>
? ? ? <el-table-column label="操作" fixed="right" width="100" align="center">
? ? ? ? <template #default="scope">
? ? ? ? ? <el-button @click="handleClick(scope.row)" type="text" size="small"
? ? ? ? ? ? >查看</el-button
? ? ? ? ? >
? ? ? ? ? <el-button type="text" size="small">編輯</el-button>
? ? ? ? </template>
? ? ? </el-table-column>
? ? </el-table>
? </div>
</template>
<script>
export default {
? data() {
? ? return {
? ? ? visible: false,
? ? ? tableData: [
? ? ? ? {
? ? ? ? ? date: "2016-05-02",
? ? ? ? ? name: "王小虎",
? ? ? ? ? province: "上海",
? ? ? ? ? city: "普陀區(qū)",
? ? ? ? ? address: "上海市普陀區(qū)金沙江路 1518 弄",
? ? ? ? ? zip: 200333,
? ? ? ? },
? ? ? ? {
? ? ? ? ? date: "2016-05-04",
? ? ? ? ? name: "王小虎",
? ? ? ? ? province: "上海",
? ? ? ? ? city: "普陀區(qū)",
? ? ? ? ? address: "上海市普陀區(qū)金沙江路 1517 弄",
? ? ? ? ? zip: 200333,
? ? ? ? },
? ? ? ? {
? ? ? ? ? date: "2016-05-01",
? ? ? ? ? name: "王小虎",
? ? ? ? ? province: "上海",
? ? ? ? ? city: "普陀區(qū)",
? ? ? ? ? address: "上海市普陀區(qū)金沙江路 1519 弄",
? ? ? ? ? zip: 200333,
? ? ? ? },
? ? ? ? {
? ? ? ? ? date: "2016-05-03",
? ? ? ? ? name: "王小虎",
? ? ? ? ? province: "上海",
? ? ? ? ? city: "普陀區(qū)",
? ? ? ? ? address: "上海市普陀區(qū)金沙江路 1516 弄",
? ? ? ? ? zip: 200333,
? ? ? ? },
? ? ? ],
? ? ? // 列的配置化對(duì)象，存儲(chǔ)配置信息
? ? ? showColumn: {
? ? ? ? date: true,
? ? ? ? name: true,
? ? ? ? provinces: true,
? ? ? ? city: true,
? ? ? ? adreess: true,
? ? ? ? zipCode: true,
? ? ? },
? ? };
? },
? mounted() {
? ? // 發(fā)請(qǐng)求得到showColumnInitData的列的名字
? ? if(localStorage.getItem("columnSet")){
? ? ? this.showColumn = JSON.parse(localStorage.getItem("columnSet"))
? ? }else{
? ? ? this.showColumn = {
? ? ? ? date: true,
? ? ? ? name: true,
? ? ? ? provinces: true,
? ? ? ? city: true,
? ? ? ? adreess: true,
? ? ? ? zipCode: true,
? ? ? };
? ? }
? },
? methods: {
? ? handleClick(row) {
? ? ? console.log(row);
? ? },
? ? saveColumn() {
? ? ? localStorage.setItem("columnSet",JSON.stringify(this.showColumn))
? ? ? this.visible = false;
? ? },
? },
};
</script>
<style lang="postcss" scoped>
/* 控制淡入淡出效果 */
.fade-enter-active,
.fade-leave-active {
? transition: opacity 0.3s;
}
.fade-enter,
.fade-leave-to {
? opacity: 0;
}
</style>問題：
1、可以簡(jiǎn)單實(shí)現(xiàn)，但最好的方法是列的全部字段也通過配置實(shí)現(xiàn)；
2、elementUI的popover嵌套在table里使用時(shí)，會(huì)出現(xiàn)面板的顯示bug，例如本文是采用:visible=“visible”，如果按照正常雙向綁定v-model:visible=“visible”，則會(huì)出現(xiàn)彈窗閃現(xiàn)的現(xiàn)象，彈出后會(huì)立馬關(guān)閉；
現(xiàn)象：
原因猜想：
v-model:visible=“visible”，會(huì)自動(dòng)觸發(fā)遮罩層關(guān)閉，置visible變?yōu)閒alse（watch監(jiān)聽visible，點(diǎn)擊彈出按鈕時(shí)，visible變?yōu)閠rue后會(huì)立馬變?yōu)閒alse）；
3、如果某一列設(shè)置minWidth屬性，如果隱藏該列，則popover會(huì)出現(xiàn)彈出兩個(gè)窗口的異?，F(xiàn)象，例如“地址”列：
故可采用dialog來實(shí)現(xiàn)：
<template> ? <div id="app"> ? ? <el-table :data="tableData" border style="width: 100%" ref="table"> ? ? ? <el-table-column ? ? ? ? fixed ? ? ? ? type="index" ? ? ? ? align="center" ? ? ? ? :index="1"> ? ? ? ? <template #header> ? ? ? ? ? <i ? ? ? ? ? ? class="el-icon-setting" ? ? ? ? ? ? style="font-size: 22px; cursor: pointer" ? ? ? ? ? ? @click="visible = true" ? ? ? ? ? ></i> ? ? ? ? </template> ? ? ? </el-table-column> ? ? ? <el-table-column ? ? ? ? prop="date" ? ? ? ? label="日期" ? ? ? ? width="150" ? ? ? ? v-if="showColumn.date" ? ? ? > ? ? ? </el-table-column> ? ? ? <el-table-column ? ? ? ? prop="name" ? ? ? ? label="姓名" ? ? ? ? width="120" ? ? ? ? v-if="showColumn.name" ? ? ? > ? ? ? </el-table-column> ? ? ? <el-table-column ? ? ? ? prop="province" ? ? ? ? label="省份" ? ? ? ? width="120" ? ? ? ? v-if="showColumn.provinces" ? ? ? > ? ? ? </el-table-column> ? ? ? <el-table-column ? ? ? ? prop="city" ? ? ? ? label="市區(qū)" ? ? ? ? width="120" ? ? ? ? v-if="showColumn.city" ? ? ? > ? ? ? </el-table-column> ? ? ? <el-table-column ? ? ? ? prop="address" ? ? ? ? label="地址" ? ? ? ? minWidth="300" ? ? ? ? v-if="showColumn.adreess" ? ? ? > ? ? ? </el-table-column> ? ? ? <el-table-column ? ? ? ? prop="zip" ? ? ? ? label="郵編" ? ? ? ? width="120" ? ? ? ? v-if="showColumn.zipCode" ? ? ? > ? ? ? </el-table-column> ? ? ? <el-table-column label="操作" fixed="right" width="100" align="center"> ? ? ? ? <template #default="scope"> ? ? ? ? ? <el-button @click="handleClick(scope.row)" type="text" size="small" ? ? ? ? ? ? >查看</el-button ? ? ? ? ? > ? ? ? ? ? <el-button type="text" size="small">編輯</el-button> ? ? ? ? </template> ? ? ? </el-table-column> ? ? </el-table> ? ? <el-dialog title="字段配置" v-model="visible"> ? ? ? <transition name="fade"> ? ? ? ? <div> ? ? ? ? ? <div>選擇顯示字段</div> ? ? ? ? ? <div> ? ? ? ? ? ? <el-checkbox v-model="showColumn.date" disabled>日期</el-checkbox> ? ? ? ? ? ? <el-checkbox v-model="showColumn.name">姓名</el-checkbox> ? ? ? ? ? ? <el-checkbox v-model="showColumn.provinces">省份</el-checkbox> ? ? ? ? ? ? <el-checkbox v-model="showColumn.city">市區(qū)</el-checkbox> ? ? ? ? ? ? <el-checkbox v-model="showColumn.adreess">地址</el-checkbox> ? ? ? ? ? ? <el-checkbox v-model="showColumn.zipCode">郵編</el-checkbox> ? ? ? ? ? </div> ? ? ? ? </div> ? ? ? </transition> ? ? ? <template #footer> ? ? ? ? <span class="dialog-footer"> ? ? ? ? ? <el-button @click="visible = false">取 消</el-button> ? ? ? ? ? <el-button type="primary" @click="saveColumn">確 定</el-button> ? ? ? ? </span> ? ? ? </template> ? ? </el-dialog> ? </div> </template>
效果：
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
本篇文章主要介紹了Vue的百度地圖插件嘗試使用，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-09-09
Vue Camera組件是一個(gè)用于在Web應(yīng)用中使用攝像頭的Vue插件,它提供了一些常見的功能和方法來控制攝像頭和捕獲圖像或視頻數(shù)據(jù),本文給大家介紹Vue Camera組件的常見功能和使用方法,感興趣的朋友一起看看吧2023-11-11
Vue表格首列相同數(shù)據(jù)合并實(shí)現(xiàn)方法
這篇文章主要介紹了Vue實(shí)現(xiàn)表格首列相同數(shù)據(jù)合并的方法，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-04-04
本篇文章主要介紹了解讀vue生成的文件目錄結(jié)構(gòu)及說明，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-11-11
vant中field組件label屬性兩端對(duì)齊問題及解決
這篇文章主要介紹了vant中field組件label屬性兩端對(duì)齊問題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-05-05
vue車牌號(hào)校驗(yàn)和銀行校驗(yàn)實(shí)戰(zhàn)
這篇文章主要介紹了vue車牌號(hào)校驗(yàn)和銀行校驗(yàn)實(shí)戰(zhàn)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-01-01
詳解vue中使用express+fetch獲取本地json文件
本篇文章主要介紹了詳解vue中使用express+fetch獲取本地json文件，非常具有實(shí)用價(jià)值，需要的朋友可以參考下2017-10-10
這篇文章主要介紹了vue表單驗(yàn)證之禁止input輸入框輸入空格，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-12-12
vue子組件如何獲取父組件的內(nèi)容(props屬性)
這篇文章主要介紹了vue子組件獲取父組件的內(nèi)容(props屬性)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
vue 使用eventBus實(shí)現(xiàn)同級(jí)組件的通訊
這篇文章主要介紹了vue 使用eventBus實(shí)現(xiàn)同級(jí)組件的通訊,需要的朋友可以參考下2018-03-03