vue+element UI实现table增加隐藏列操作

mounted() {

    // 发请求得到showColumnInitData的列的名字

    if(localStorage.getItem("columnSet")){

      this.showColumn = JSON.parse(localStorage.getItem("columnSet"))

    }else{

      this.showColumn = {

        name: true,

        age: true,

        city: true,

      };

    }

  },

    isEatCom: false,
      visible: false,
      // 列的配置化对象，存储配置信息
      showColumn: {
        name: true,
        age: true,
        city: true,
      },

 这里是在表格中增加了一个操作入口，以弹窗的方式展示出来你所要操作的列

<el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-setting"
          size="mini"
          @click="visible = true"
          ></el-button
        >
      </el-col>

弹窗所展示的内容 

<el-dialog title="设置表格展示" :visible.sync="visible">
      <transition name="fade">
        <div>
          <div>
            <el-checkbox v-model="showColumn.name">名称</el-checkbox>
            <el-checkbox v-model="showColumn.age">年龄</el-checkbox>
            <el-checkbox v-model="showColumn.city">城市</el-checkbox>
          </div>
          <div style="font-size: 12px;text-align: center;margin-top: 20px;color: red;">取消勾选即可隐藏某列</div>
        </div>
      </transition>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="saveColumn">确 定</el-button>
        </span>
      </template>
    </el-dialog>

在table中增加v-if

<el-table-column label="名称" align="center" prop="name" v-if="showColumn.name"/>