JeecgBoot表格列设置组件优化实践

问题背景

在JeecgBoot前端框架中，表格列设置组件(ColumnSetting.vue)是用户自定义表格显示列的重要功能模块。该组件允许用户通过勾选方式控制表格列的显示与隐藏，并支持列的拖拽排序。然而在实际使用过程中，开发者发现该组件存在两个主要问题：

1. 当用户取消所有列的显示后，再次打开列设置面板时，列选项无法正常显示
2. 当用户仅勾选中间部分列时，刷新页面后未勾选的列会出现在最前面，破坏了用户预期的列顺序

问题分析

通过对源代码的分析，我们发现问题的根源在于列状态管理和缓存机制的实现方式上：

1. 列显示状态管理问题：当所有列都被隐藏时，组件无法正确获取到列信息，导致面板显示异常。这是因为组件仅从当前显示的列中获取信息，而没有考虑缓存中保存的完整列信息。

2. 列顺序保持问题：组件虽然使用了缓存机制保存列的顺序和显示状态，但在初始化时没有正确处理缓存数据与当前列状态的合并逻辑，导致刷新后列顺序错乱。

解决方案

针对上述问题，我们提出了以下优化方案：

1. 完善列信息获取逻辑

修改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;
}

2. 优化初始化逻辑

重构init方法，确保正确处理缓存数据和当前列状态的合并：

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;
}

3. 增强缓存处理

在useColumnsCache中增加getCache方法，确保能够正确获取缓存数据：

getCache: () => $ls.get(cacheKey.value),

实现原理

1. 列信息恢复机制：当所有列都被隐藏时，通过getCacheColumns从缓存中恢复完整的列信息，确保列设置面板始终能够显示所有可配置的列选项。

2. 列顺序保持机制：在初始化时，首先获取当前列的显示状态，然后结合缓存中的排序信息，对列进行重新排序。这样既保留了用户自定义的显示/隐藏状态，又保持了用户设定的列顺序。

3. 状态同步机制：通过watchEffect和setTimeout的组合，确保在组件挂载后正确初始化列状态，避免因时序问题导致的显示异常。

最佳实践

在使用JeecgBoot的表格列设置组件时，建议开发者注意以下几点：

1. 列定义完整性：确保为每列提供唯一的dataIndex或title，这是组件识别和匹配列的关键标识。

2. 缓存键设置：为不同的表格设置不同的缓存键，避免列设置状态的相互干扰。

3. 默认状态处理：合理设置defaultHidden属性，明确哪些列默认隐藏，哪些列默认显示。

4. 固定列处理：注意固定列(fixed)的特殊处理，确保在列顺序调整时固定列的位置不受影响。

总结

通过对JeecgBoot表格列设置组件的优化，我们解决了列显示状态管理和顺序保持的问题，提升了用户体验。这一优化不仅修复了现有问题，还为组件的稳定性和可维护性打下了更好的基础。开发者在使用该组件时，可以更加放心地依赖其功能，为用户提供更流畅的表格列自定义体验。