快捷導(dǎo)航

vue實(shí)現(xiàn)動(dòng)態(tài)控制el-table表格列的展示與隱藏

更新時(shí)間：2022年04月12日 08:48:21 作者：zhougl996

這篇文章主要介紹了vue實(shí)現(xiàn)動(dòng)態(tài)控制el-table表格列的展示與隱藏，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了vue動(dòng)態(tài)控制el-table表格列的展示與隱藏的具體代碼，供大家參考，具體內(nèi)容如下

1.引入el-table組件，這里我直接用官網(wǎng)的示例代碼

<template>
? ? <div class="page">
? ? ? ? <el-popover width="60" trigger="click">
? ? ? ? ? ? <el-checkbox-group v-model="columnSelecteds">
? ? ? ? ? ? ? ? <el-checkbox v-for="item in columnHeaders" :label="item.title" :key="item.title" ></el-checkbox> ? ?
? ? ? ? ? ? </el-checkbox-group>
? ? ? ? ? ? <el-button slot="reference" icon="el-icon-more" circle style="margin-left: 100px;"></el-button>
? ? ? ? </el-popover>
? ? ? ? <el-table
? ? ? ? ? ? :data="tableData"
? ? ? ? ? ? ref="dataTable"
? ? ? ? ? ? stripe
? ? ? ? ? ? style="width: 100%">
? ? ? ? ? ? <el-table-column v-if="columnHeaders[0].isShow" prop="date" label="日期"></el-table-column>
? ? ? ? ? ? <el-table-column v-if="columnHeaders[1].isShow" prop="name" label="姓名"></el-table-column>
? ? ? ? ? ? <el-table-column v-if="columnHeaders[2].isShow" prop="address" label="地址"></el-table-column>
? ? ? ? </el-table>
? ? </div>
</template>

頁面效果圖：

2.數(shù)據(jù)綁定與監(jiān)聽

<script>
export default {
? ? name: 'ElTableTest',
? ? data() {
? ? ? ? return {
? ? ? ? ? ? // 表格數(shù)據(jù)
? ? ? ? ? ? tableData: [{
? ? ? ? ? ? ? ? date: '2016-05-02',
? ? ? ? ? ? ? ? name: '王小虎',
? ? ? ? ? ? ? ? address: '上海市普陀區(qū)金沙江路 1518 弄'
? ? ? ? ? ? }, {
? ? ? ? ? ? ? ? date: '2016-05-04',
? ? ? ? ? ? ? ? name: '王小虎',
? ? ? ? ? ? ? ? address: '上海市普陀區(qū)金沙江路 1517 弄'
? ? ? ? ? ? }, {
? ? ? ? ? ? ? ? date: '2016-05-01',
? ? ? ? ? ? ? ? name: '王小虎',
? ? ? ? ? ? ? ? address: '上海市普陀區(qū)金沙江路 1519 弄'
? ? ? ? ? ? }, {
? ? ? ? ? ? ? ? date: '2016-05-03',
? ? ? ? ? ? ? ? name: '王小虎',
? ? ? ? ? ? ? ? address: '上海市普陀區(qū)金沙江路 1516 弄'
? ? ? ? ? ? }],
? ? ? ? ? ? //表頭信息
? ? ? ? ? ? columnHeaders: [?
? ? ? ? ? ? ? ? {index: 0, title: "日期", isShow: true},
? ? ? ? ? ? ? ? {index: 1, title: "姓名", isShow: true},
? ? ? ? ? ? ? ? {index: 2, title: "地址", isShow: true}
? ? ? ? ? ? ], ?
? ? ? ? ? ? //已選擇的項(xiàng)
? ? ? ? ? ? columnSelecteds: ["日期","姓名", "地址"]?
? ? ? ? } ??
? ? },
? ? watch: {
? ? ? ? /**
? ? ? ? ?* @title 監(jiān)聽列顯示隱藏
? ? ? ? ?*/
? ? ? ? columnSelecteds(newArrayVal) {
? ? ? ? ? ? // 計(jì)算為被選中的列標(biāo)題數(shù)組
? ? ? ? ? ? var nonSelecteds = this.columnHeaders
? ? ? ? ? ? ? ? ? ? ? ? .filter(item => newArrayVal.indexOf(item.title) == -1)?
? ? ? ? ? ? ? ? ? ? ? ? .map(item => item.title)
? ? ? ? ? ? // 根據(jù)計(jì)算結(jié)果進(jìn)行表格重繪
? ? ? ? ? ? this.columnHeaders.filter(item => {
? ? ? ? ? ? ? ? let isNonSelected = nonSelecteds.indexOf(item.title) != -1
? ? ? ? ? ? ? ? if (isNonSelected) {
? ? ? ? ? ? ? ? ? ? // 隱藏未選中的列
? ? ? ? ? ? ? ? ? ? item.isShow = false
? ? ? ? ? ? ? ? ? ? this.$nextTick(() => {
? ? ? ? ? ? ? ? ? ? ? ? this.$refs.dataTable.doLayout()
? ? ? ? ? ? ? ? ? ? })
? ? ? ? ? ? ? ? } else {
? ? ? ? ? ? ? ? ? ? // 顯示已選中的列
? ? ? ? ? ? ? ? ? ? item.isShow = true
? ? ? ? ? ? ? ? ? ? this.$nextTick(() => {
? ? ? ? ? ? ? ? ? ? ? ? this.$refs.dataTable.doLayout()
? ? ? ? ? ? ? ? ? ? })
? ? ? ? ? ? ? ? }
? ? ? ? ? ? })
? ? ? ? }
? ? }
}
</script>

監(jiān)聽到已選擇和未選擇的列，調(diào)用doLayout()方法對(duì)表格進(jìn)行重繪。

最終效果：