Jeecg Boot项目中表格列设置组件的优化实践

问题背景

在Jeecg Boot项目(版本3.7.1及以上)中，表格列设置组件(ColumnSetting.vue)存在两个主要问题：

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

这些问题影响了用户体验和数据展示的一致性，需要进行技术优化。

问题分析

通过分析源代码，发现问题主要出在以下几个方面：

1. 列数据获取逻辑不完善：当所有列都被隐藏时，组件无法正确获取列数据
2. 缓存处理机制不完整：列顺序的缓存处理没有完全覆盖所有场景
3. 初始化流程存在缺陷：组件初始化时对列状态的判断不够严谨

解决方案

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: () => $ls.get(cacheKey.value)

实现原理

1. 双重数据源保障：当常规获取列数据失败时，自动从缓存中获取，确保数据不丢失
2. 严格的排序处理：根据缓存中的排序信息对列进行重新排序，保持用户设置的一致性
3. 完整的初始化状态：在初始化时正确设置所有状态变量，包括勾选状态和全选状态

优化效果

经过上述优化后：

1. 即使隐藏所有列，再次打开设置面板时也能正确显示所有列选项
2. 刷新页面后列的显示顺序与用户设置保持一致
3. 勾选状态在各种操作后都能正确保持

总结

表格列设置组件的优化展示了前端开发中几个重要原则：

1. 健壮性：组件应该能够处理各种边界情况
2. 一致性：用户操作的结果应该在各种场景下保持一致
3. 可维护性：代码结构清晰，便于后续维护和扩展

这些优化不仅解决了具体问题，也为类似组件的开发提供了参考模式。在实际项目中，我们应该充分考虑用户的各种操作路径，确保组件在各种场景下都能正常工作。