vue动态table 动态表头数据+动态列表数据

效果图:

<template><div style="padding: 20px"><el-scrollbar><div class="scrollbar-flex-content"><div class="opt-search"><div style="width: 100px"> </div><div class="opt-box"><el-button type="primary" @click="selectClounm"> 选择列 </el-button><el-dropdown placement="bottom-start" style="margin: 0 15px"><el-button type="primary"> 批量操作 </el-button><template #dropdown><el-dropdown-menu><el-dropdown-item><el-icon><View /></el-icon>批量转换工作项状态</el-dropdown-item><el-dropdown-item @click="handleBatch('copy')"><el-icon><CopyDocument /></el-icon> 批量复制</el-dropdown-item><el-dropdown-item @click="deleteDatil"><el-icon><DeleteFilled /></el-icon>批量删除</el-dropdown-item><el-dropdown-item @click="handleBatch('move')"><el-icon><Switch /></el-icon> 批量移动</el-dropdown-item><el-dropdown-item><el-icon><HelpFilled /></el-icon> 导入需求</el-dropdown-item><el-dropdown-item><el-icon><HelpFilled /></el-icon> 导出需求</el-dropdown-item></el-dropdown-menu></template></el-dropdown></div></div><!-- <div>选择结果： {{ multipleSelection }}</div> --><el-table :data="tableData" style="width: 100%" @selection-change="handleSelectionChange" v-loading="loading" table-layout="auto"><el-table-column type="selection" width="55" fixed/><el-table-column sortable label="Id" prop="workitemId" fixed width="150" align="center"></el-table-column><el