需求：

由于表格的列過多,用滾動條進(jìn)行滾動對比數(shù)據(jù)不方便，所以提出，手動選擇展示列

實(shí)現(xiàn)思路：

1. 表格默認(rèn)展示所有字段，每個字段通過 v-if 屬性來進(jìn)行判斷是否顯示；
2. 點(diǎn)擊設(shè)置按鈕圖標(biāo)(表格右上角），彈出選擇框el-popover；
3. 選擇框中包括：全選復(fù)選框、所有字段復(fù)選框組 el-checkbox-group、取消按鈕、確定按鈕；
4. 選擇展示字段后，點(diǎn)擊“確定”按鈕：更新每個字段值的show屬性（true / false）；
5. 關(guān)閉彈出框；重新渲染表格；
6. 選擇展示字段后，點(diǎn)擊“取消”按鈕：關(guān)閉彈出框；
7. 打開彈出框時：選中當(dāng)前表格所展示的字段；重新渲染表格；

開發(fā)時遇到的坑點(diǎn)：?

打開和確定操作后，需要重新渲染表格：

// 重新渲染表格nextTick(() => {tableRef.value.doLayout();})

?具體實(shí)現(xiàn)代碼：vue3為例

html部分

//設(shè)置按妞點(diǎn)擊打開選擇框 
<el-popover :visible="popoverVisible" :width="160" @show="showPopover"><div class="popoverCheckBoxArea"><el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全選</el-checkbox><div style="margin: 10px 0;"></div><el-checkbox-group v-model="checkedColumns" @change="handleCheckedColumnsChange"><el-checkbox v-for="column in columns" :label="column.lable" :key="column.lable">{{column.lable}}</el-checkbox></el-checkbox-group></div><div style="text-align: right; margin: 10px 0 0 0"><el-button size="small" text @click="popoverVisible = false" style="margin-right: 10px;">取消</el-button><el-button size="small" type="primary" @click="confirmPopover ">確定</el-button></div><template #reference><el-button :icon="Setting" circle style="float: right;"  @click="popoverVisible = true"/></template></el-popover>
//表格部分<el-table v-loading="data.loading" @selection-change="handleSelectionChange" class="list-table":data="data.dataList" border stripe highlight-current-row ref="tableRef"><el-table-column type="selection" width="45" align="center" /><el-table-column label="#" align="center" type="index" width="60"/><el-table-column prop="code" label="服務(wù)器名稱" align="center" width="140" v-if="showColumn('服務(wù)器名稱')"/><!-- <el-table-column prop="interIp" label="內(nèi)網(wǎng)IP" width="120" align="center" /> --><el-table-column prop="hostName" label="域名" align="center" width="200" v-if="showColumn('域名')"><template #default="scope"><el-tooltip class="box-item" effect="dark" :content="scope.row.interIp" placement="top">{{ scope.row.hostName }}</el-tooltip></template></el-table-column><el-table-column prop="isDeploy" label="是否部署" align="center" width="85" v-if="showColumn('是否部署')"><template #default="scope"><dict-tag :type="DICT_TYPE.IS_DEPLOYMENT" :value="scope.row.isDeploy" :projectId="queryParams.projectId" /></template></el-table-column>><el-table-column prop="httpPort" label="HTTP" align="center" width="60px" v-if="showColumn('HTTP')"/><el-table-column prop="socketPort" label="SOCKET" align="center" width="68px" v-if="showColumn('SOCKET')"/><el-table-column prop="operationType" label="狀態(tài)" align="center" width="90px" v-if="showColumn('狀態(tài)')"><template #default="scope"><el-tag v-if="scope.row.operationType != undefined" :type="operationTypecolor(scope.row.operationType)":effect="scope.row.operationType == '未知' ? 'light' : 'dark'">{{ scope.row.operationType }}</el-tag></template></el-table-column><el-table-column prop="gsVer" label="當(dāng)前版本" align="center" width="130px" v-if="showColumn('當(dāng)前版本')"/><el-table-column prop="gsVerUpdateTime" label="上次更新時間" width="160" align="center" :formatter="(dateFormatter as any)" v-if="showColumn('上次更新時間')"/><el-table-column prop="publish" label="正式服" align="center" width="85px" v-if="showColumn('正式服')"><template #default="scope"><dict-tag :type="DICT_TYPE.FORMALDRESS" :value="scope.row.publish" :projectId="queryParams.projectId" /></template></el-table-column>><el-table-column prop="showTime" label="展示時間" width="160" align="center" :formatter="(dateFormatter as any)" v-if="showColumn('展示時間')"/><el-table-column prop="startTime" label="開服時間" width="95" align="center" :formatter="dateFormatters" v-if="showColumn('開服時間')"/><el-table-column prop="mergeTime" label="合服時間" width="95" align="center" :formatter="dateFormatters" v-if="showColumn('合服時間')"/><el-table-column prop="mergeCount" label="合服次數(shù)" width="81" align="center" v-if="showColumn('合服次數(shù)')"/><el-table-column prop="gsFrontVersion" label="前端版本" width="100" align="center" v-if="showColumn('前端版本')"/><el-table-column prop="serviceDays" label="開服天數(shù)" width="100" align="center" v-if="showColumn('開服天數(shù)')"/><el-table-column prop="gsLevel" label="游戲服等級" width="100" align="center" v-if="showColumn('游戲服等級')"/><el-table-column prop="s_type" label="執(zhí)行區(qū)" width="100"  align="center" fixed="right"><template #default="scope"><div style="display: flex;"><span class="readoDiv" v-if="scope.row.s_type != undefined" :style="color(scope.row.s_type)"></span><span class="readoSpan">{{ scope.row.s_type }}</span></div></template></el-table-column><el-table-column label="操作" width="110px" align="center" v-auth="['operation:gameserver:handleServiceList']" fixed="right"><template #default="scope"><el-dropdown ref="dropdown" trigger="click" @command="(command) => handleCommand(command, scope.row)"v-auth="['operation:gameserver:handleServiceList',]" @visible-change="visiblechange"><el-button type="primary" link><Icon icon="ep:d-arrow-right" />>> 更多</el-button><template #dropdown><el-dropdown-menu><el-popconfirm title="查看運(yùn)行狀態(tài)?" v-auth="'operation:gameserver:handleServiceList'"@confirm="runningState(scope.row)" confirm-button-text="確定" cancel-button-text="取消" @show="show"><template #reference><el-button :disabled="dropdowndisabled">運(yùn)行狀態(tài)</el-button></template></el-popconfirm><el-popconfirm title="查看關(guān)閉游戲?" v-auth="'operation:gameserver:handleServiceList'"@confirm="closeGames(scope.row)" confirm-button-text="確定" cancel-button-text="取消" @show="show"><template #reference><el-button :disabled="dropdowndisabled">關(guān)閉游戲</el-button></template></el-popconfirm><el-popconfirm title="查看啟動游戲?" v-auth="'operation:gameserver:handleServiceList'"@confirm="startGames(scope.row)" confirm-button-text="確定" cancel-button-text="取消" @show="show"><template #reference><el-button :disabled="dropdowndisabled">啟動游戲</el-button></template></el-popconfirm><el-popconfirm title="查看熱更游戲?" v-auth="'operation:gameserver:handleServiceList'"@confirm="watchGames(scope.row)" confirm-button-text="確定" cancel-button-text="取消" @show="show"><template #reference><el-button :disabled="dropdowndisabled">熱更游戲</el-button></template></el-popconfirm><el-dropdown-item command="updateGames" style="padding: 0; width: 100%;"v-auth="'operation:gameserver:handleServiceList'" :disabled="dropdowndisabled"><el-button :disabled="dropdowndisabled">更新游戲</el-button></el-dropdown-item><el-dropdown-item command="startFile" :disabled="dropdowndisabled"><el-button :disabled="dropdowndisabled">更新start文件</el-button></el-dropdown-item><el-dropdown-item command="configFile" :disabled="dropdowndisabled"><el-button :disabled="dropdowndisabled">更新config文件</el-button></el-dropdown-item></el-dropdown-menu></template></el-dropdown></template></el-table-column></el-table>

js部分

const popoverVisible = ref(false)
const checkAll = ref(true)
// 選擇展示的字段數(shù)組默認(rèn)的
const columns = ref([{ lable: '服務(wù)器名稱', show: true },{ lable: '域名', show: true },{ lable: '是否部署', show: true },{ lable: 'HTTP', show: true },{ lable: 'SOCKET', show: true },{ lable: '狀態(tài)', show: true },{ lable: '當(dāng)前版本', show: true },{ lable: '上次更新時間', show: true },{ lable: '正式服', show: true },{ lable: '展示時間', show: true },{ lable: '開服時間', show: true },{ lable: '合服時間', show: true },{ lable: '合服次數(shù)',  show: true },{ lable: '前端版本', show: true },{ lable: '開服天數(shù)', show: false },{ lable: '游戲服等級', show: false },
])  const checkedColumns:any = ref([]) //選中的數(shù)據(jù)
const isIndeterminate = ref(false)
// 點(diǎn)擊彈出框的“全選”按鈕
const handleCheckAllChange = (val:any)=> {let columnsValueList:any = [];columns.value.map(item => columnsValueList.push(item.lable));checkedColumns.value = val ? columnsValueList : [];isIndeterminate.value = false;
}
// 點(diǎn)擊彈出框的選擇展示菜單的復(fù)選框
const handleCheckedColumnsChange=(value:any) =>{let checkedCount = value.length;checkAll.value = checkedCount === columns.value.length;isIndeterminate.value = checkedCount > 0 && checkedCount < columns.value.length;
}
//表格實(shí)例
const tableRef:any = ref(null)
// 彈出框打開時觸發(fā)
const showPopover =()=> {// 選中目前已展示的字段值checkedColumns.value = [];columns.value.map((item:any) => {if(item.show) {checkedColumns.value.push(item.lable);}});// 如果目前展示的是全部字段，則需要勾選上“全選”按鈕if(columns.value.length == checkedColumns.value.length) {checkAll.value = true;isIndeterminate.value = false;}// 重新渲染表格nextTick(() => {tableRef.value.doLayout();})
}// 表格列是否顯示的方法
const showColumn = (currentColumn:string)=>{const column = columns.value.find((item: any) => item.lable === currentColumn);if (column) {return column.show;} else {console.error(`Column with label "${currentColumn}" not found.`);return undefined; // 或者您可以選擇拋出一個錯誤}
}
// 點(diǎn)擊彈出框的“確定”按鈕
const confirmPopover = ()=> {//選擇不能沒有,需要可放開注釋// if(checkedColumns.value.length == 0) {//   ElMessage.error('請選擇需要展示的表格字段')//     return;// }// 根據(jù)選擇結(jié)果，遍歷修改列是否展示的屬性值columns.value.forEach(item => {if(checkedColumns.value.some((el:any) => el == item.lable)) {item.show = true;} else {item.show = false;}})popoverVisible.value = false;// 重新渲染表格nextTick(() => {tableRef.value.doLayout();})
}

效果：?