el-table 手动选择展示列

需求：

由于表格的列过多,用滚动条进行滚动对比数据不方便，所以提出，手动选择展示列

实现思路：

1. 表格默认展示所有字段，每个字段通过 v-if 属性来进行判断是否显示；
2. 点击设置按钮图标(表格右上角），弹出选择框el-popover；
3. 选择框中包括：全选复选框、所有字段复选框组 el-checkbox-group、取消按钮、确定按钮；
4. 选择展示字段后，点击“确定”按钮：更新每个字段值的show属性（true / false）；
5. 关闭弹出框；重新渲染表格；
6. 选择展示字段后，点击“取消”按钮：关闭弹出框；
7. 打开弹出框时：选中当前表格所展示的字段；重新渲染表格；

开发时遇到的坑点： 

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

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

 具体实现代码：vue3为例

html部分

//设置按妞点击打开选择框 

          

            全选
              

              
              {{column.lable}}
            
          
          

            取消
            
              确定
            
           
          
        
//表格部分
        
          
          
          
          
          
            
          
          
            
          >
          
          
          
            
          
          
          
          
            
          >
          
          
          
          
          
          
          
          
            
          
          
            
          
        
    

js部分

const popoverVisible = ref(false)
const checkAll = ref(true)
// 选择展示的字段数组默认的
const columns = ref([
    { lable: '服务器名称', show: true },
    { lable: '域名', show: true },
    { lable: '是否部署', show: true },
    { lable: 'HTTP', show: true },
    { lable: 'SOCKET', show: true },
    { lable: '状态', show: true },
    { lable: '当前版本', show: true },
    { lable: '上次更新时间', show: true },
    { lable: '正式服', show: true },
    { lable: '展示时间', show: true },
    { lable: '开服时间', show: true },
    { lable: '合服时间', show: true },
    { lable: '合服次数',  show: true },
    { lable: '前端版本', show: true },
    { lable: '开服天数', show: false },
    { lable: '游戏服等级', show: false },
])  

const checkedColumns:any = ref([]) //选中的数据
const isIndeterminate = ref(false)
// 点击弹出框的“全选”按钮
const handleCheckAllChange = (val:any)=> {
    let columnsValueList:any = [];
    columns.value.map(item => columnsValueList.push(item.lable));
    checkedColumns.value = val ? columnsValueList : [];
    isIndeterminate.value = false;
}
// 点击弹出框的选择展示菜单的复选框
const handleCheckedColumnsChange=(value:any) =>{
    let checkedCount = value.length;
    checkAll.value = checkedCount === columns.value.length;
    isIndeterminate.value = checkedCount > 0 && checkedCount < columns.value.length;
}
//表格实例
const tableRef:any = ref(null)
// 弹出框打开时触发
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; // 或者您可以选择抛出一个错误
    }
}
// 点击弹出框的“确定”按钮
const confirmPopover = ()=> {
    //选择不能没有,需要可放开注释
    // if(checkedColumns.value.length == 0) {
    //   ElMessage.error('请选择需要展示的表格字段')
    //     return;
    // }
    // 根据选择结果，遍历修改列是否展示的属性值
    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();
    })
}

效果：