根据项目需要，需要可以动态控制表格列的显示与隐藏，如下图，复选框选中状态下为显示，为选中状态下为隐藏

 思路就是：我们通过vue的监听功能来监听复选框的变化，当复选框发生了变化的时候，我们看对应复选框的选中和未选中的值。选中的为true让对应的列显示、隐藏的为false让对应的列隐藏。当然因为vue是数据的双向绑定的，所以我们就让对应的列的隐藏和表格的隐藏一一对应即可。

<template>
  <div>
    <el-button @click="showColumnOption">点击</el-button>  //点击按钮弹出复选框
    <div class="show" style="margin:20px 0 0 10px">
      <transition>
        <div class="columnOption" v-show="isShowColumn">
          <div class="content">
            <div class="head" style="color:#666666;font-weight: 600;font-size: 14px;">选择显示字段</div>
            <div class="body">
              <el-checkbox v-model="checkList.base_name">基地名称</el-checkbox>
              <el-checkbox v-model="checkList.images">基地图片</el-checkbox>
              <el-checkbox v-model="checkList.id">所属区域</el-checkbox>
              <el-checkbox v-model="checkList.address">基地详细地址</el-checkbox>
              <el-checkbox v-model="checkList.base_area">基地面积</el-checkbox>
              <el-checkbox v-model="checkList.base_user_name">基地负责人</el-checkbox>
              <el-checkbox v-model="checkList.user_phone">联系方式</el-checkbox>
              <el-checkbox v-model="checkList.base_status">基地状态</el-checkbox>
              <el-button size="small" type="primary" plain @click="saveColumn" style="margin:-5px 0 0 20px">
                保存列配置
              </el-button>
            </div>
          </div>
        </div>
      </transition>
    </div>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="base_name" label="基地名称" width="" v-if="showColumn.base_name" />   //将列的显示与隐藏用一个变量来控制，通过控制变量操作即可
      <el-table-column prop="images" label="基地图片" width="" v-if="showColumn.images" />
      <el-table-column prop="id" label="所属区域" width="" v-if="showColumn.id" />
      <el-table-column prop="address" label="基地详细地址" width="" v-if="showColumn.address" />
      <el-table-column prop="base_area" label="基地面积" width="" v-if="showColumn.base_area" />
      <el-table-column prop="base_user_name" label="基地负责人" width="" v-if="showColumn.base_user_name" />
      <el-table-column prop="user_phone" label="联系方式" width="" v-if="showColumn.user_phone" />
      <el-table-column prop="base_status" label="基地状态" width="" v-if="showColumn.base_status" />
      <el-table-column label="操作" width="">
        <template>
          <el-button size="small">编辑</el-button>
          <el-button size="small">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>

</template>

<script>
const showColumn = { //通过控制这个实现显示与隐藏
  base_name: true,
  user: true,
  address: true,
  base_area: true,
  base_user_name: true,
  user_phone: true,
};

export default {
  data() {
    return {
      isShowColumn: false, //控制显示与隐藏，默认隐藏
      // 列的配置化对象，存储配置信息
      checkList: {},//复选框绑定的值
      showColumn,
      tableData: [
        {
          base_name: "AAA",
          longAndlat: "AAA",
          user: "AAA",
          address: "AAA",
          base_area: "AAA",
          base_user_name: "AAA",
          user_phone: "AAA",
        },
        {
          base_name: "BBB",
          longAndlat: "BBB",
          user: "BBB",
          address: "BBB",
          base_area: "BBB",
          base_user_name: "BBB",
          user_phone: "BBB",
        },
        {
          base_name: "CCC",
          longAndlat: "CCC",
          user: "CCC",
          address: "CCC",
          base_area: "CCC",
          base_user_name: "CCC",
          user_phone: "CCC",
        },
      ]
    }
  },
  watch: {
    // 监听复选框配置列所有的变化
    checkList: {
      handler: function (newnew) {
        // 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 = {
        base_name: true,
        user: true,
        address: true,
        base_area: true,
        base_user_name: true,
        user_phone: true,
      };
    }
  },
  methods: {
    showColumnOption() {
      this.isShowColumn = true;
    },
    saveColumn() {
      localStorage.setItem("columnSet", JSON.stringify(this.checkList))//用户点击复选框，永久储存
      this.isShowColumn = false;
    }
  }
}
</script>

ok 解决