elementui-table列隐藏展示：支持全选反选重置，以及列字段值错位问题解决

先来看看效果图

默认加载效果：

 全选后的效果：

 后台框架是若依系统，不多说线上组件代码，代码写在了若依的RightToolbar中，代码如下

<template>
  <div class="top-right-btn">
    <el-row>
      <el-tooltip
        class="item"
        effect="dark"
        content="列展示隐藏"
        placement="top"
        v-if="showColumn"
      >
        <el-popover :width="popoverWidth" trigger="click">
          <el-checkbox
            v-model="checkAll"
            label="全选"
            :indeterminate="isIndeterminateModel"
            @change="handleCheckAllChange"
            class="mb10"
          />
          <el-button type="text" @click="initColumn" class="ml20">
            重置
          </el-button>
          <el-checkbox-group
            v-model="selecteds"
            @change="handleCheckedmodelChange"
          >
            <el-checkbox
              v-for="item in columnHeadersArr"
              :label="item.title"
              :key="item.title"
              class="el-checkbox-width"
            ></el-checkbox>
          </el-checkbox-group>
          <el-button
            size="mini"
            slot="reference"
            circle
            icon="el-icon-s-operation"
          />
        </el-popover>
      </el-tooltip>
      <el-tooltip
        class="item ml10"
        effect="dark"
        :content="showSearch ? '隐藏搜索' : '显示搜索'"
        placement="top"
        v-if="showSearchIcon"
      >
        <el-button
          size="mini"
          circle
          icon="el-icon-search"
          @click="toggleSearch()"
        />
      </el-tooltip>
      <el-tooltip class="item" effect="dark" content="刷新" placement="top">
        <el-button
          size="mini"
          circle
          icon="el-icon-refresh"
          @click="refresh()"
        />
      </el-tooltip>
    </el-row>
  </div>
</template>
<script>
import { deepClone } from "@/utils/index";
export default {
  name: "RightToolbar",
  data() {
    return {
      //初始化隐藏展示
      initSelecteds: [],
      //已选择的项
      selecteds: [],
      //所有数据
      allColumns: [],
      columnHeadersArr: [],
      checkAll: false,
      isIndeterminateModel: false
    };
  },
  props: {
    //默认不展示列的展示与隐藏按钮
    showColumn: {
      type: Boolean,
      default: false
    },
    //弹出框宽度
    popoverWidth: {
      type: Number,
      default: 200
    },
    //表格所有列头
    columnHeaders: {
      type: Array,
      default: () => []
    },
    //选中展示的列
    columnSelecteds: {
      type: Array,
      default: () => []
    },
    showSearch: {
      type: Boolean,
      default: true
    },
    showSearchIcon: {
      type: Boolean,
      default: true
    }
  },
  watch: {
    //监听列展示与隐藏
    selecteds(newArrayVal) {
      // 计算为被选中的列标题数组
      var nonSelecteds = this.columnHeaders
        .filter(item => newArrayVal.indexOf(item.title) == -1)
        .map(item => item.title);
      // 根据计算结果进行表格重绘
      this.columnHeaders.filter(item => {
        let isNonSelected = nonSelecteds.indexOf(item.title) != -1;
        if (isNonSelected) {
          // 隐藏未选中的列
          item.isShow = false;
          this.$nextTick(() => {
            this.$emit("handleTableColumn", newArrayVal);
          });
        } else {
          // 显示已选中的列
          item.isShow = true;
          this.$nextTick(() => {
            this.$emit("handleTableColumn", newArrayVal);
          });
        }
      });
    }
  },
  mounted() {
    if (this.showColumn) {
      setTimeout(() => {
        this.initSelecteds = deepClone(this.columnSelecteds);
        this.selecteds = deepClone(this.columnSelecteds);
        this.allColumns = [];
        for (let item of this.columnHeaders) {
          if (item.selectShow == 1) {
            this.allColumns.push(item.title);
          }
        }
        //弹窗只展示需要控制的字段
        let arr = this.columnHeaders.filter(item => {
          return item.selectShow == 1;
        });
        this.columnHeadersArr = arr;
      }, 20);
    }
  },
  methods: {
    //初始化隐藏展示列
    initColumn() {
      this.selecteds = deepClone(this.initSelecteds);
      this.isIndeterminateModel = false;
      this.$nextTick(() => {
        this.$emit("handleTableColumn", this.selecteds);
      });
      this.checkAll = false;
      this.$forceUpdate();
    },
    //全选、反选
    handleCheckAllChange(val) {
      this.selecteds = val ? this.allColumns : [];
      this.isIndeterminateModel = false;
    },
    handleCheckedmodelChange(value) {
      const modelLength = value.length;
      this.checkAll = modelLength === this.allColumns.length;
      this.isIndeterminateModel =
        modelLength > 0 && modelLength < this.allColumns.length;
    },
    //搜索
    toggleSearch() {
      this.$emit("update:showSearch", !this.showSearch);
    },
    //刷新
    refresh() {
      this.$emit("queryTable");
    }
  }
};
</script>
<style lang="scss" scoped>
.el-checkbox-width {
  width: 100px;
  height: 25px;
}
</style>

调用组件：

<right-toolbar
    :popoverWidth="500"
    :showColumn="true"
    :columnHeaders="columnHeaders"
    :columnSelecteds="columnSelecteds"
    @handleTableColumn="handleTableColumn"
   :showSearch.sync="showSearch"
   @queryTable="getList"
>
</right-toolbar>

<el-table
        ref="dataTable"
        v-loading="loading"
        :data="dataTable"
        @selection-change="handleSelectionChange"
        stripe
        v-show="columnSelecteds.length > 0"
      >
        <el-table-column
          v-if="columnHeaders[0].isShow"
          :key="columnHeaders[0].index"
          type="selection"
          width="45"
          align="center"
        />
        <el-table-column
          v-if="columnHeaders[1].isShow"
          :key="columnHeaders[1].index"
          label="用户ID"
          align="center"
          prop="personId"
        />
        <el-table-column
          v-if="columnHeaders[2].isShow"
          :key="columnHeaders[2].index"
          label="注册时间"
          align="center"
          width="100"
          prop="personCreateTime"
        />
        <el-table-column
          v-if="columnHeaders[3].isShow"
          :key="columnHeaders[3].index"
          label="姓名"
          align="center"
          width="100"
          prop="personName"
        />
        <el-table-column
          v-if="columnHeaders[4].isShow"
          :key="columnHeaders[4].index"
          label="医院"
          align="center"
          prop="hospitalName"
        />
        <el-table-column
          v-if="columnHeaders[5].isShow"
          :key="columnHeaders[5].index"
          label="性别"
          align="center"
          prop="personSex"
        >
          <template slot-scope="scope">
            <span v-if="scope.row.personSex == 1">男</span>
            <span v-if="scope.row.personSex == 2">女</span>
          </template>
        </el-table-column>
        <el-table-column
          v-if="columnHeaders[6].isShow"
          :key="columnHeaders[6].index"
          label="手机"
          align="center"
          prop="personPhone"
          width="120px"
        />
        <el-table-column
          v-if="columnHeaders[7].isShow"
          :key="columnHeaders[7].index"
          label="责任医生"
          :show-overflow-tooltip="true"
          align="center"
          prop="nickName"
        />
        <el-table-column
          v-if="columnHeaders[8].isShow"
          :key="columnHeaders[8].index"
          label="健康管理师"
          align="center"
          width="120"
          prop="otherInformation.healthyManageUserName"
        />
        <!-- :show-overflow-tooltip="true" -->
        <el-table-column
          v-if="columnHeaders[9].isShow"
          :key="columnHeaders[9].index"
          label="疾病信息"
          align="center"
          prop="illStr"
        />
        <!-- <el-table-column
          v-if="columnHeaders[10].isShow"
          :key="columnHeaders[10].index"
          label="干预开始时间"
          :show-overflow-tooltip="true"
          align="center"
          prop="gykssj"
        />
        <el-table-column
          v-if="columnHeaders[11].isShow"
          :key="columnHeaders[11].index"
          label="干预结束时间"
          :show-overflow-tooltip="true"
          align="center"
          prop="gyjssj"
        /> -->

        <template v-if="showWeight">
          <el-table-column
            v-if="columnHeaders[12].isShow"
            :key="columnHeaders[12].index"
            label="身高(cm)"
            align="center"
            prop="personHeight"
          />
          <el-table-column
            v-if="columnHeaders[13].isShow"
            :key="columnHeaders[13].index"
            label="BMI"
            align="center"
            prop="bmi"
          />
          <el-table-column
            v-if="columnHeaders[14].isShow"
            :key="columnHeaders[14].index"
            label="原始体重(kg)"
            :show-overflow-tooltip="true"
            align="center"
            prop="personWeight"
          />
          <el-table-column
            v-if="columnHeaders[15].isShow"
            :key="columnHeaders[15].index"
            label="最新体重(kg)"
            :show-overflow-tooltip="true"
            align="center"
            prop="personNewWeight"
          />
          <el-table-column
            v-if="columnHeaders[16].isShow"
            :key="columnHeaders[16].index"
            label="理想体重(kg)"
            align="center"
            width="120"
            prop="idealWeight"
          />
        </template>
        <template v-if="showExamination">
          <el-table-column
            v-if="columnHeaders[17].isShow"
            :key="columnHeaders[17].index"
            label="体检日期"
            width="100"
            align="center"
            prop="detectionDay"
          />
          <el-table-column
            v-if="columnHeaders[18].isShow"
            :key="columnHeaders[18].index"
            label="体检次数"
            align="center"
            prop="detectionNum"
          />
          <el-table-column
            v-if="columnHeaders[19].isShow"
            :key="columnHeaders[19].index"
            label="体检单位"
            align="center"
            prop="detectionHospital"
          />
        </template>
        <el-table-column
          v-if="columnHeaders[20].isShow"
          :key="columnHeaders[20].index"
          label="评估状态"
          align="center"
          prop="assessmentStatus"
        />
        <!-- <el-table-column
        label="干预类型"
        align="center"
        prop="personInter"
        width="125px"
      >
        <template slot-scope="scope">
          <el-select
            v-model="scope.row.personInter"
            placeholder="请选择"
            @change="changeInter(this, scope)"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </template>
      </el-table-column> -->
        <el-table-column
          v-if="columnHeaders[21].isShow"
          :key="columnHeaders[21].index"
          label="患者方案"
          align="center"
          prop="planType"
        >
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              v-if="scope.row.planType == 1"
              @click="toPersonScheme(scope.row)"
            >
              智能方案
            </el-button>
            <span v-if="scope.row.planType == 2">强化干预</span>
            <span v-if="scope.row.planType == 0"></span>
          </template>
        </el-table-column>
        <el-table-column
          v-if="columnHeaders[22].isShow"
          :key="columnHeaders[22].index"
          label="回访时间"
          align="center"
          prop="lastRecordTime"
        />
      </el-table>

data() {
//表头信息
//selectShow：在筛选弹窗李是否需要展示
      columnHeaders: [
        { index: -1, title: "选择框", isShow: true, selectShow: 1 },
        { index: 0, title: "用户ID", isShow: true, selectShow: 1 },
        { index: 1, title: "注册时间", isShow: false, selectShow: 1 },
        { index: 2, title: "姓名", isShow: true, selectShow: 1 },
        { index: 3, title: "医院", isShow: false, selectShow: 1 },
        { index: 4, title: "性别", isShow: true, selectShow: 1 },
        { index: 5, title: "手机", isShow: true, selectShow: 1 },
        { index: 6, title: "责任医生", isShow: true, selectShow: 1 },
        { index: 7, title: "健康管理师", isShow: false, selectShow: 1 },
        { index: 8, title: "疾病信息", isShow: true, selectShow: 1 },
        { index: 9, title: "干预开始时间", isShow: true, selectShow: 0 },
        { index: 10, title: "干预结束时间", isShow: true, selectShow: 0 },
        { index: 11, title: "身高(cm)", isShow: false, selectShow: 1 },
        { index: 12, title: "BMI", isShow: false, selectShow: 1 },
        { index: 13, title: "原始体重(kg)", isShow: true, selectShow: 1 },
        { index: 14, title: "最新体重(kg)", isShow: true, selectShow: 1 },
        { index: 15, title: "理想体重(kg)", isShow: false, selectShow: 1 },
        { index: 16, title: "体检日期", isShow: false, selectShow: 1 },
        { index: 17, title: "体检次数", isShow: false, selectShow: 1 },
        { index: 18, title: "体检单位", isShow: false, selectShow: 1 },
        { index: 19, title: "评估状态", isShow: false, selectShow: 1 },
        { index: 20, title: "患者方案", isShow: true, selectShow: 1 },
        { index: 21, title: "回访时间", isShow: false, selectShow: 1 }
      ],
      //默认展示已选择的项
      columnSelecteds: [
        "选择框",
        "用户ID",
        "姓名",
        "性别",
        "手机",
        "责任医生",
        "疾病信息",
        "原始体重(kg)",
        "最新体重(kg)",
        "患者方案"
      ],
}


//展示隐藏列后table重绘
    handleTableColumn(val) {
      this.columnSelecteds = val;
      this.$nextTick(() => {
        this.$refs.dataTable.doLayout();
      });
    },