vue實現(xiàn)動態(tài)控制表格列的顯示隱藏

更新時間：2022年04月12日 11:37:56 作者：熱忱！

這篇文章主要為大家詳細(xì)介紹了vue實現(xiàn)動態(tài)控制表格列的顯示隱藏，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了vue實現(xiàn)動態(tài)控制表格列顯示隱藏的具體代碼，供大家參考，具體內(nèi)容如下

一、效果

如上圖所示，點擊table右上方的表格按鈕，彈出菜單欄，進(jìn)行勾選，從而達(dá)到表格對應(yīng)列顯示和隱藏

二、代碼

1.HTML部分

<template>
? <div id="app">
? ? <el-table :data="tableData" border style="width: 100%" ref="table">
? ? ? <el-table-column
? ? ? ? fixed
? ? ? ? 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="地址"
? ? ? ? width="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 fixed="right" width="100" align="center">
? ? ? ? <template slot="header">
? ? ? ? ? <i
? ? ? ? ? ? class="el-icon-setting"
? ? ? ? ? ? style="font-size: 22px; cursor: pointer"
? ? ? ? ? ? @click="showColumnOption"
? ? ? ? ? ></i>
? ? ? ? </template>
? ? ? ? <template slot-scope="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>
? ? <!-- 配置列面板 -->
? ? <transition name="fade">
? ? ? <div class="columnOption" v-show="isShowColumn">
? ? ? ? <div class="content">
? ? ? ? ? <div class="head">選擇顯示字段</div>
? ? ? ? ? <div class="body">
? ? ? ? ? ? <el-checkbox v-model="checkList.date" disabled>日期</el-checkbox>
? ? ? ? ? ? <el-checkbox v-model="checkList.name">姓名</el-checkbox>
? ? ? ? ? ? <el-checkbox v-model="checkList.provinces">省份</el-checkbox>
? ? ? ? ? ? <el-checkbox v-model="checkList.city">市區(qū)</el-checkbox>
? ? ? ? ? ? <el-checkbox v-model="checkList.adreess">地址</el-checkbox>
? ? ? ? ? ? <el-checkbox v-model="checkList.zipCode">郵編</el-checkbox>
? ? ? ? ? </div>
? ? ? ? ? <div class="footer">
? ? ? ? ? ? <el-button size="small" type="primary" plain @click="saveColumn"
? ? ? ? ? ? ? >保存列配置</el-button
? ? ? ? ? ? >
? ? ? ? ? </div>
? ? ? ? </div>
? ? ? </div>
? ? </transition>
? </div>
</template>

通過 v-if="showColumn.date" 來判斷表格對應(yīng)列的狀態(tài)

2.javascript部分

<script>
export default {
? data() {
? ? return {
? ? ? isShowColumn: 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,
? ? ? ? },
? ? ? ],
? ? ? // 列的配置化對象，存儲配置信息
? ? ? checkList: {},
? ? ? showColumn: {
? ? ? ? date: true,
? ? ? ? name: true,
? ? ? ? provinces: true,
? ? ? ? city: true,
? ? ? ? adreess: true,
? ? ? ? zipCode: true,
? ? ? },
? ? };
? },
? watch: {
? ? // 監(jiān)聽復(fù)選框配置列所有的變化
? ? checkList: {
? ? ? handler: function (newnew, oldold) {
? ? ? ? // console.log(newnew);?
? ? ? ? this.showColumn = newnew;
? ? ? ? // 這里需要讓表格重新繪制一下，否則會產(chǎn)生固定列錯位的情況
? ? ? ? this.$nextTick(() => {
? ? ? ? ? this.$refs.table.doLayout();
? ? ? ? });
? ? ? },
? ? ? deep: true,
? ? ? immediate: true
? ? },
? },
? mounted() {
? ? // 發(fā)請求得到checkListInitData的列的名字
? ? if(localStorage.getItem("columnSet")){
? ? ? this.checkList = JSON.parse(localStorage.getItem("columnSet"))
? ? }else{
? ? ? this.checkList = {
? ? ? ? date: true,
? ? ? ? name: true,
? ? ? ? provinces: true,
? ? ? ? city: true,
? ? ? ? adreess: true,
? ? ? ? zipCode: true,
? ? ? };
? ? }
? },
? methods: {
? ? handleClick(row) {
? ? ? console.log(row);
? ? },
? ? showColumnOption() {
? ? ? this.isShowColumn = true;
? ? },
? ? saveColumn() {
? ? ? localStorage.setItem("columnSet",JSON.stringify(this.checkList))
? ? ? this.isShowColumn = false;
? ? },
? },
};
</script>

3.css樣式部分

?.columnOption {
? position: fixed;
? z-index: 20;
? top: 0;
? left: 0;
? width: 100%;
? height: 100%;
? background-color: rgba(0, 0, 0, 0.3);
? display: flex;
? flex-direction: row-reverse;
? .content {
? ? width: 100px;
? ? height: 100%;
? ? background-color: rgb(203, 223, 198);
? ? .head {
? ? ? width: 100%;
? ? ? height: 44px;
? ? ? border-bottom: 1px solid #000;
? ? ? display: flex;
? ? ? justify-content: center;
? ? ? align-items: center;
? ? ? font-size: 12px;
? ? }
? ? .body {
? ? ? width: 100%;
? ? ? height: calc(100% - 88px);
? ? ? box-sizing: border-box;
? ? ? padding-top: 10px;
? ? ? overflow-y: auto;
? ? ? .items {
? ? ? ? width: 100%;
? ? ? ? height: 100%;
? ? ? ? overflow-y: auto;
? ? ? ? display: flex;
? ? ? ? flex-direction: column;
? ? ? ? .el-checkbox {
? ? ? ? ? width: 100%;
? ? ? ? ? height: 28px;
? ? ? ? ? line-height: 28px;
? ? ? ? ? margin-bottom: 14px;
? ? ? ? ? display: inline-block;
? ? ? ? ? font-family: PingFang SC;
? ? ? ? ? font-style: normal;
? ? ? ? ? font-weight: normal;
? ? ? ? ? font-size: 14px;
? ? ? ? ? color: #000;
? ? ? ? ? overflow: hidden;
? ? ? ? ? text-overflow: ellipsis;
? ? ? ? ? white-space: nowrap;
? ? ? ? ? box-sizing: border-box;
? ? ? ? ? padding-left: 14px;
? ? ? ? }
? ? ? ? .el-checkbox:hover {
? ? ? ? ? background-color: #f5f7fa;
? ? ? ? }
? ? ? }
? ? }
? ? .footer {
? ? ? width: 100%;
? ? ? height: 44px;
? ? ? border-top: 1px solid #000;
? ? ? display: flex;
? ? ? justify-content: center;
? ? ? align-items: center;
? ? }
? }
}
// 控制淡入淡出效果
.fade-enter-active,
.fade-leave-active {
? transition: opacity 0.3s;
}
.fade-enter,
.fade-leave-to {
? opacity: 0;
}

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: