源码搜藏网

本文实例为大家分享了vue实现动态控制表格列显示隐藏的具体代码，供大家参考，具体内容如下

一、效果

如上图所示，点击table右上方的表格按钮，弹出菜单栏，进行勾选，从而达到表格对应列显示和隐藏

二、代码

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="市区"
    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">市区</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" 来判断表格对应列的状态

2.javascript部分

<script>
export default {
 data() {
  return {
   isShowColumn: false,
   tableData: [
    {
     date: "2016-05-02",
     name: "王小虎",
     province: "上海",
     city: "普陀区",
     address: "上海市普陀区金沙江路 1518 弄",
     zip: 200333,
    },
    {
     date: "2016-05-04",
     name: "王小虎",
     province: "上海",
     city: "普陀区",
     address: "上海市普陀区金沙江路 1517 弄",
     zip: 200333,
    },
    {
     date: "2016-05-01",
     name: "王小虎",
     province: "上海",
     city: "普陀区",
     address: "上海市普陀区金沙江路 1519 弄",
     zip: 200333,
    },
    {
     date: "2016-05-03",
     name: "王小虎",
     province: "上海",
     city: "普陀区",
     address: "上海市普陀区金沙江路 1516 弄",
     zip: 200333,
    },
   ],
   // 列的配置化对象，存储配置信息
   checkList: {},
   showColumn: {
    date: true,
    name: true,
    provinces: true,
    city: true,
    adreess: true,
    zipCode: true,
   },
  };
 },
 watch: {
  // 监听复选框配置列所有的变化
  checkList: {
   handler: function (newnew, oldold) {
    // console.log(newnew);
    this.showColumn = newnew;
    // 这里需要让表格重新绘制一下，否则会产生固定列错位的情况
    this.$nextTick(() => {
     this.$refs.table.doLayout();
    });
   },
   deep: true,
   immediate: true
  },
 },
 mounted() {
  // 发请求得到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;
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持源码搜藏网。