el-table 实现动态隐藏列

html

 <el-popover placement="bottom" trigger="hover" width="80">
                        <template #reference>
                            <el-button :icon="Operation" circle></el-button>
                        </template>
                        <div>
                            <el-checkbox-group v-model="checkedColumns" @change="watchCheckedColumns" class="checkbox-wrap">
                                <el-checkbox size="large" style="display: block" v-for="item in checkBoxGroup"
                                    :key="item.value" :label="item.value">{{ item.label }}</el-checkbox>
                            </el-checkbox-group>
                        </div>
                    </el-popover>


                    <el-table-column v-if="tableColVisiableData.taskName" prop="taskName" label="任务名"
                    width="420"></el-table-column>
                <el-table-column v-if="tableColVisiableData.description" prop="description" label="描述"
                    show-overflow-tooltip></el-table-column>
                <el-table-column v-if="tableColVisiableData.totalNum" prop="totalNum" label="任务总数"
                    width="120"></el-table-column>
                <el-table-column v-if="tableColVisiableData.finishNum" prop="finishNum" label="完成数"
                    width="120"></el-table-column>
                <el-table-column v-if="tableColVisiableData.taskStatus" prop="taskStatus" label="状态"
                    width="120"></el-table-column>
                <el-table-column v-if="tableColVisiableData.employeeId" prop="employeeId" label="操作人"
                    width="120"></el-table-column>
                <el-table-column v-if="tableColVisiableData.createTime" prop="createTime" label="创建时间"
                    width="200"></el-table-column>

js

//用于存放随机数用于key属性的绑定
var reload = ref();

// 多选框的列表，列出表格的每一列
const checkBoxGroup = ref(
    [{
        "label": "任务名",
        "value": "taskName"
    }, {
        "label": "描述",
        "value": "description"
    }, {
        "label": "任务总数",
        "value": "totalNum"
    }, {
        "label": "完成数",
        "value": "finishNum"
    }, {
        "label": "状态",
        "value": "taskStatus"
    }, {
        "label": "操作人",
        "value": "employeeId"
    }, {
        "label": "创建时间",
        "value": "createTime"
    }]
)

// 当前选中的多选框，代表当前展示的列
const checkedColumns = ref([
    "taskName",
    "description",
    "totalNum",
    "finishNum",
    "taskStatus",
    "employeeId",
    "createTime"
])

// 列出表格中的每一列，默认都展示
const tableColVisiableData = reactive({
    "taskName": true,
    "description": true,
    "totalNum": true,
    "finishNum": true,
    "taskStatus": true,
    "employeeId": true,
    "createTime": true,
})
const watchCheckedColumns = () => {
    console.log(checkedColumns.value);
    for (let key in tableColVisiableData) {
        tableColVisiableData[key] = false;
    }
    checkedColumns.value.forEach((item) => {
        tableColVisiableData[item] = true
    })
    // 重新渲染表格
    reload.value = Math.random()
}