写一个可显示隐藏表格列的功能：el-table

实现效果如标题，写一个可显示隐藏表格列的功能，先看一下效果

视图层：表格头插槽，插入el-popover

<el-table-column fixed="right" prop="" label="操作" align="center">
          <!-- 配置表格 -->
          <template slot="header" slot-scope="scope">
            <el-popover placement="bottom" :width="700" @hide="configuration">
              <transition name="fade">
                <div>
                  <div v-if="false">{{ scope }}</div>
                  <div>选择显示字段(选项更改后请<span style="color: #e6a23c"
                  >点击框外</span
                >并<span style="color: #e6a23c">刷新页面</span>)</div>
                  <div>
                    <el-checkbox
                      v-for="item in columnData"
                      :model="item.name"
                      :checked="item.value"
                      :key="item.name"
                      @change="handleCheckChange(item)"
                      >{{ item.name }}</el-checkbox
                    >
                  </div>
                </div>
              </transition>
              <el-button size="mini" slot="reference" type="text"><i class="el-icon-setting"></i> 配置表格</el-button>
            </el-popover>
          </template>
          <!-- 下边的 template 是列表里的内容了，自己根据自身需求修改一下 -->

          <template slot-scope="row">
            <el-button v-if="orderState == 2" @click="printThisOrder(row.row)" type="text" size="mini"
              >打印订单</el-button
            >
            <el-button @click="printThisOrder(row.row)" type="text" size="mini">查看详情</el-button>
          </template>
        </el-table-column>

data中配合需要展示的字段

data(){
return{
columnData: [
        { name: '订单id', value: true },
        { name: '订单状态', value: true },
        { name: '商品图片', value: true },
        { name: '商品名称', value: true },
        { name: '规格名称', value: true },
        { name: '订单商品数量', value: true },
        { name: '邮费金额', value: true },
        { name: '总支付金额', value: true },
        { name: '主播单价', value: true },
        { name: '订单是否超时', value: true },
        { name: '打印状态', value: true },
        { name: '发货状态', value: true },
        { name: '快递单号', value: true },
        { name: '用户下单时间', value: true },
        { name: '主播下单时间', value: true },
      ],
}
 }

配合方法，更改选择框的value值，并存进localStorage持久化

/**
     * ==============保存表格字段====================
     */
    configuration() {
      // 框失焦保存选择
      localStorage.setItem('orderAdminColumn', JSON.stringify(this.columnData));
    },
    handleCheckChange(item) {
      this.columnData.forEach((obj) => {
        if (obj.name == item.name) {
          obj.value = !obj.value;
        }
      });
    },

计算属性的一个值

computed: {
    columnList() {
      let list = [];
      this.columnData.forEach((item, ids) => {
        if (item.value == true) {
          list.push(item.name);
        } else list.splice(ids, 1);
      });
      return list;
    },
  },

挂载时提取localStorage中的数据

 mounted() {
    if (localStorage.getItem('orderAdminColumn')) {
      this.columnData = JSON.parse(localStorage.getItem('orderAdminColumn'));
    }
  },

el-table 里的 column，举几个例子

<el-table-column v-if="columnList.includes('商品名称')" prop="productName" label="商品名称" align="center"> </el-table-column>
        <el-table-column v-if="columnList.includes('规格名称')" prop="skuName" label="规格名称" align="center"> </el-table-column>
        <el-table-column v-if="columnList.includes('订单商品数量')" prop="sum" label="订单商品数量" align="center"> </el-table-column>

下面是随笔，方便直接拿来改用，可以不看了

<template slot-scope="scope2">
            <span v-if="scope2.row.productName.length < 10">{{ scope2.row.productName }}</span>
            <el-popover v-else placement="top" title="" trigger="hover">
              <div class="tagPlus" slot="reference">
                <span style="color: #1890ff" size="mini">{{ scope2.row.productName.substring(0, 10) + '...' }}</span>
              </div>
              {{ scope2.row.productName }}
            </el-popover>
          </template>