element下拉列表动态显示隐藏表格列数据

先上效果图

上代码

这里用的是element的下拉菜单 + 多选

	<el-checkbox-group
          v-model="checkList"
          style="float: right;margin-right:20px"
        >
          <el-dropdown :hide-on-click="false">
            <el-button type="primary" plain size="small">
              列显示<i class="el-icon-arrow-down el-icon--right"></i>
            </el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item
                v-for="(item, index) in dropDownList"
                :key="index"
              >
                <el-checkbox
                  :label="item.label"
                  @change="chickBoxGroupChange(item)"
                ></el-checkbox
              ></el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </el-checkbox-group>

在表格里边把要显示隐藏的列数据表头用v-if或者v-show的方式进行切换 （默认为true）

	 <el-table
          ref="elTable"
          style="margin-top:10px"
          v-loading="loading"
          :data="userList"
          @selection-change="handleSelectionChange"
          @row-click="rowClick"
        >
          <el-table-column
            label="全选"
            type="selection"
            width="50"
            align="center"
            v-if="dropDownList[0].isor"
          />
          <el-table-column
            label="Id"
            align="center"
            prop="jobApplyId"
            :show-overflow-tooltip="true"
            v-if="dropDownList[1].isor"
          />
          <el-table-column
            sortable
            label="时间"
            align="center"
            prop="createTime"
            :show-overflow-tooltip="true"
            v-if="dropDownList[12].isor"
          />
          <el-table-column
            label="职位"
            align="center"
            prop="sysPost.postName"
            :show-overflow-tooltip="true"
            width="120"
            v-if="dropDownList[2].isor"
          />
          <el-table-column
            label="姓名"
            align="center"
            :show-overflow-tooltip="true"
            v-if="dropDownList[3].isor"
          >
            <template slot-scope="scope">
              <el-tooltip
                class="item"
                effect="dark"
                :content="'点击查看 ' + scope.row.name + ' 详细信息'"
                placement="top-start"
              >
                <p style="cursor: pointer">{{ scope.row.name }}</p>
              </el-tooltip>
            </template>
          </el-table-column>
          <el-table-column
            label="性别"
            align="center"
            prop="sex"
            :formatter="formater"
            v-if="dropDownList[4].isor"
            :show-overflow-tooltip="true"
          >
          </el-table-column>
          <el-table-column
            label="电话"
            prop="phone"
            :show-overflow-tooltip="true"
            v-if="dropDownList[5].isor"
          />
          <el-table-column
            label="意向城市"
            align="center"
            v-if="dropDownList[6].isor"
            prop="favCityName"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            label="阶段状态"
            align="center"
            prop="processStep"
            v-if="dropDownList[7].isor"
            :show-overflow-tooltip="true"
            :formatter="formatter"
          />
          <el-table-column
            label="出生年月"
            align="center"
            v-if="dropDownList[8].isor"
            prop="birthday"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            label="渠道来源"
            align="center"
            v-if="dropDownList[9].isor"
            prop="jobChannel.name"
            :show-overflow-tooltip="true"
            :formatter="formattrter"
          />
          <el-table-column
            label="户籍地"
            v-if="dropDownList[10].isor"
            prop="regAddress"
            :show-overflow-tooltip="true"
            width="120"
          />
          <el-table-column
            label="到岗时间"
            v-if="dropDownList[11].isor"
            align="center"
            prop="arrivalDate"
            :show-overflow-tooltip="true"
          />
        </el-table>

data数据

//表头下拉组
checkList: [
        "全选",
        "Id",
        "时间",
        "职位",
        "姓名",
        "性别",
        "电话",
        "意向城市",
        "阶段状态",
        "出生年月",
        "渠道来源",
        "户籍地",
        "到岗时间"
      ],
      //显示隐藏
dropDownList: [
        { isor: true },
        { isor: true },
        { isor: true },
        { isor: true },
        { isor: true },
        { isor: true },
        { isor: true },
        { isor: true },
        { isor: true },
        { isor: true },
        { isor: true },
        { isor: true },
        { isor: true }
      ],

这里好像当时是有点问题 所以又进行了全部为true的操作

  mounted() {
    this.dropDownList = this.$refs.elTable.columns;
    this.dropDownList.forEach(m => {
      m.isor = true;
    });
  },
   // 点击隐藏显示表格列
    chickBoxGroupChange(item) {
      item.isor = !item.isor;
    },

至此就可以实现选择点击下拉列表实现表格的显示隐藏列数据的操作了，有哪些好的方法 希望各位看官能打在评论区一起讨论…