vue-vben-admin icon indicating copy to clipboard operation
vue-vben-admin copied to clipboard

showTableSetting设置为true时,BasicTable部分功能与预期结果不符

Open qyn980427 opened this issue 1 year ago • 10 comments

⚠️ 重要 ⚠️ 在进一步操作之前,请检查下列选项。如果您忽视此模板或者没有提供关键信息,您的 Issue 将直接被关闭

  • [ ] 已阅读 文档.
  • [ ] 确保您的代码已是最新或者所报告的 Bug 在最新版本中可以重现. (部分 Bug 可能已经在最近的代码中修复)
  • [ ] 已在 Issues 中搜索了相关的关键词
  • [ ] 不是 ant design vue 组件库的 Bug

描述 Bug

showTableSetting设置为true时,BasicTable部分功能与预期结果不符 1.rowSelection勾选框未出现 2.actionColumn未在table最右侧,而是在columns中设置的right定位左边

将showTableSetting设置为false后,上述两个问题消失

复现 Bug

showTableSetting: true,
actionColumn: {
  width: 180,
  title: '操作',
  dataIndex: 'action',
},

系统信息

  • 操作系统:
  • Node 版本:
  • 包管理器 (npm/yarn/pnpm) 及其版本:

qyn980427 avatar Dec 18 '23 14:12 qyn980427

@qyn980427 点 reset/重置 有没有帮助?

xachary avatar Dec 19 '23 06:12 xachary

+1 , 之前是好的,应该是最近修改触发的 bug,麻烦看一下 🙏

Tairy avatar Dec 19 '23 06:12 Tairy

@qyn980427 点 reset/重置 有没有帮助?

没有

qyn980427 avatar Dec 19 '23 06:12 qyn980427

@qyn980427 问题1,设置一下 rowSelection:

          <!-- 设置了 rowSelection 才出现 -->
          <Checkbox
            v-model:checked="isRowSelectionShow"
            @change="onRowSelectionShowChange"
            v-if="defaultIsRowSelectionShow"
          >

问题2: 以 src\views\demo\table\FixedColumn.vue 为例:

  const [registerTable] = useTable({
    title: 'TableAction组件及固定列示例',
    api: demoListApi,
    columns: columns,
    rowSelection: { type: 'radio' },
    bordered: true,
    // 添加以下代码测试
    actionColumn: {
      width: 160,
      title: 'Action',
      dataIndex: 'action',
    },
    showTableSetting: true,
  });

点重置刷新,效果如下:

image

xachary avatar Dec 19 '23 07:12 xachary

@xachary 您好,第一个问题是设置了rowSelection后默认没有,刚刚测试了一下可以通过重置解决,但是重置的话是不是有点太麻烦了,我记得之前是不需要的 第二个问题重置是解决不了的,如果column中有部分列设置了fixed:'right'后,actionColumn还是会出现在自定义的左边

qyn980427 avatar Dec 19 '23 09:12 qyn980427

@xachary 但是我把showTableSetting改为false后,第二个问题就解决了,第一个问题也不需要重置了

qyn980427 avatar Dec 19 '23 09:12 qyn980427

这个就是近期更新ColumnSetting.vue这个文件之后的bug 很多展示不符合预期 我把回退之后就正常了

pfsj-xk avatar Dec 19 '23 09:12 pfsj-xk

@xachary 您好,第一个问题是设置了rowSelection后默认没有,刚刚测试了一下可以通过重置解决,但是重置的话是不是有点太麻烦了,我记得之前是不需要的 第二个问题重置是解决不了的,如果column中有部分列设置了fixed:'right'后,actionColumn还是会出现在自定义的左边

@qyn980427

第一个问题 现在列的设定附加了缓存,重置就是清空了缓存。 晚点提个pr,加个开关,默认关闭缓存功能。

第二个问题 文件:src\components\Table\src\components\settings\ColumnSetting.vue 调整一下,晚点提个pr:

  // 列表列更新
  const tableColumnsUpdate = () => {
    // 考虑了所有列
    const columns = cloneDeep(table.getColumns());

    // 从左 fixed 最一列开始排序
    let count = columns.filter((o) => o.fixed === 'left' || o.fixed === true).length;

    // 按 columnOptions 的排序 调整 table.getColumns() 的顺序和值
    for (const opt of columnOptions.value) {
      const colIdx = columns.findIndex((o) => o.dataIndex === opt.value);
      //
      if (colIdx > -1) {
        const target = columns[colIdx];
        target.defaultHidden = opt.column?.defaultHidden;
        target.fixed = opt.fixed;
        columns.splice(colIdx, 1);
        columns.splice(count++, 0, target); // 递增插入
      }
    }

    // 是否存在 action
    const actionIndex = columns.findIndex((o) => o.dataIndex === 'action');
    if (actionIndex > -1) {
      const actionCol = columns.splice(actionIndex, 1);
      columns.push(actionCol[0]);
    }

    // 设置列表列
    tableColumnsSet(columns);
  };

xachary avatar Dec 19 '23 10:12 xachary

@xachary 序号列重置了就有了,刷新以后就又没有了.....

qyn980427 avatar Dec 20 '23 12:12 qyn980427

@xachary 序号列重置了就有了,刷新以后就又没有了.....

针对最新版本

默认 :cache=“false",希望刷新还在,就需要给ColumnSetting设置为true。 既然刷新没有了,检查 版本有没有同步,ColumnSetting 及其 store。

那最新的版本运行以下测试,避免代码不一致。

xachary avatar Dec 20 '23 13:12 xachary

This issue is stale because it has been open 60 days with no activity. Remove stale label or comment or this will be closed in 7 days

anncwb avatar Apr 09 '24 01:04 anncwb