JeecgBoot表格列设置组件异常分析与解决方案

问题背景

JeecgBoot作为一款优秀的企业级开发框架，其表格组件功能强大，但在3.7.1版本及之前版本中，表格列设置组件(ColumnSetting.vue)存在两个明显的异常问题：

1. 全取消显示异常：当用户取消所有列的显示后，再次打开列设置面板时，列选项不显示
2. 列排序异常：当用户勾选中间部分列后刷新页面，未勾选的列会出现在最前面

问题分析

全取消显示异常原因

该问题源于组件初始化逻辑不够健壮。当用户取消所有列显示后，getColumns()方法获取到的列数据为空，而组件没有正确处理这种边界情况，导致后续渲染失败。

列排序异常原因

排序问题主要出在缓存处理逻辑上。当前实现中，当用户刷新页面后，组件没有正确地从缓存中恢复列的显示顺序，特别是对未勾选列的处理存在逻辑缺陷，导致这些列被错误地排到了前面。

解决方案

核心修复思路

1. 增强列获取逻辑：当从当前表格实例获取不到列数据时，尝试从缓存中获取
2. 完善排序逻辑：确保从缓存恢复时，列的显示顺序与用户最后一次设置保持一致

具体实现方案

修改getColumns方法

function getColumns() {
  const ret: Options[] = [];
  let t = table.getColumns({ ignoreIndex: true, ignoreAction: true });
  if (!t.length) {
    t = table.getCacheColumns();
  }
  t.forEach((item) => {
    ret.push({
      label: (item.title as string) || (item.customTitle as string),
      value: (item.dataIndex || item.title) as string,
      ...item,
    });
  });
  return ret;
}

优化初始化逻辑

async function init() {
  const columns = getColumns();
  
  const checkList = table
    .getColumns({ ignoreAction: true, ignoreIndex: true })
    .map((item) => {
      if (item.defaultHidden) {
        return '';
      }
      return item.dataIndex || item.title;
    })
    .filter(Boolean) as string[];

  if (!plainOptions.value.length) {
    const { sortedList } = getCache() || {};
    await nextTick();
    let tmp = columns;
    if (sortedList?.length) {
      tmp = columns.sort((prev, next) => {
        return sortedList.indexOf(prev.value) - sortedList.indexOf(next.value);
      });
    }
    plainOptions.value = tmp;
    plainSortOptions.value = tmp;
    cachePlainOptions.value = tmp;
    state.defaultCheckList = checkList;
  } else {
    unref(plainOptions).forEach((item: BasicColumn) => {
      const findItem = columns.find((col: BasicColumn) => col.dataIndex === item.dataIndex);
      if (findItem) {
        item.fixed = findItem.fixed;
      }
    });
  }
  state.isInit = true;
  state.checkedList = checkList;
  state.checkAll = columns.length === checkList.length;
}

技术要点

1. 缓存机制：利用localStorage缓存用户列设置，确保刷新后能恢复状态
2. 响应式处理：通过watchEffect和nextTick确保DOM更新后执行初始化
3. 边界处理：增强对空列、默认隐藏列等特殊情况的处理
4. 排序算法：基于缓存中的顺序信息对列进行重新排序

最佳实践建议

1. 对于类似的可配置组件，建议在开发时充分考虑各种边界情况
2. 用户配置的持久化存储应该包含完整的状态信息，而不仅仅是部分数据
3. 组件初始化时应该处理好异步数据和DOM更新的时序问题
4. 对于表格类组件，列的顺序和显示状态应该作为一个整体来处理

该修复方案已在JeecgBoot后续版本中合并，有效解决了列设置组件的异常问题，提升了用户体验。开发者在使用表格组件时，可以更加灵活地配置列显示状态而不用担心数据丢失或顺序错乱的问题。