[Table] 当resizable和columnController同时存在时，去掉很多列后出现异常

[huangpiqiao]

tdesign-vue 版本

1.2.7

重现链接

https://codesandbox.io/s/tdesign-vue-demo-forked-ft8w33?file=/src/demo.vue

重现步骤

1. 点击“列配置”按钮
2. 取消全选
3. 点击“确定”

762_1682491999.mp4

期望结果

去掉很多列后表格内容正常显示

实际结果

去掉很多列后滚动条异常且有些列无法看到

框架版本

No response

浏览器版本

No response

系统版本

No response

Node版本

No response

补充说明

No response

[github-actions]

👋 @huangpiqiao，感谢给 TDesign 提出了 issue。
请根据 issue 模版确保背景信息的完善，我们将调查并尽快回复你。

[github-actions]

♥️ 有劳 @chaishi 尽快确认问题。
确认有效后将下一步计划和可能需要的时间回复给 @huangpiqiao 。

[huangpiqiao]

fixed 1.4.5

[huangpiqiao]

在设置了吸顶功能后，还是会出现此情况
示例：https://codesandbox.io/s/tdesign-vue-demo-forked-w35cv7?file=/src/demo.vue:440-442

[chaishi]

注意，去除代码中的 table-layout: auto，列宽调整场景只能使用 table-layout: fixed

[chaishi]

PR #2606 合并后，按照下述步骤检查代码：

1. headerAffixedTop 和 paginationAffixedBottom 单独定义一个变量，使用固定对象，避免每次渲染都创建新的对象
2. 设置 tableLayout: fixed 模式
3. 且删除所有对 table 元素宽度的，并且删除的 tableContentWidth

2023-07-23.15.58.04.mov

<template>
  <!-- 注意组件父元素的宽度 -->
  <div
    class="tdesign-demo-block-column-large tdesign-demo__table"
    style="width: 100%"
  >
    <t-table
      rowKey="index"
      :data="data"
      :columns="columns"
      :footData="footData"
      :rowClassName="rowClassName"
      :pagination="{ defaultCurrent: 1, defaultPageSize: 5, total: TOTAL }"
      :headerAffixedTop="headerAffixedTopProps"
      :paginationAffixedBottom="paginationAffixedBottom"
      table-layout="fixed"
      dragSort="col"
      bordered
      resizable
      @drag-sort="onDragSortChange"
      :displayColumns.sync="displayColumns"
      :columnController="{
        fields: ['channel', 'status', 'detail.email', 'createTime', 'matters'],
        dialogProps: { preventScrollThrough: true },
      }"
    >
      <template #t-foot-required> 插槽渲染表尾 </template>
    </t-table>
  </div>
</template>
<script lang="jsx">
import {
  ErrorCircleFilledIcon,
  CheckCircleFilledIcon,
  CloseCircleFilledIcon,
} from "tdesign-icons-vue";

function getData(count) {
  const data = [];
  for (let i = 0; i < count; i++) {
    data.push({
      index: i + 1,
      applicant: ["贾明", "张三", "王芳"][i % 3],
      status: i % 3,
      channel: ["电子签署", "纸质签署", "纸质签署"][i % 3],
      detail: {
        email: [
          "w.cezkdudy@lhll.au",
          "r.nmgw@peurezgn.sl",
          "p.cumx@rampblpa.ru",
        ][i % 3],
      },
      matters: [
        "宣传物料制作费用",
        "algolia 服务报销",
        "相关周边制作费",
        "激励奖品快递费",
      ][i % 4],
      time: [2, 3, 1, 4][i % 4],
      createTime: [
        "2022-01-01",
        "2022-02-01",
        "2022-03-01",
        "2022-04-01",
        "2022-05-01",
      ][i % 4],
    });
  }
  return data;
}

const TOTAL = 38;

function getColumns(h, { fixedLeftColumn, fixedRightColumn }) {
  return [
    {
      align: "left",
      colKey: "applicant",
      title: "申请人",
      foot: () => <b style="font-weight: bold">表尾信息</b>,
      width: "120",
      fixed: fixedLeftColumn ? "left" : undefined,
    },
    {
      colKey: "status",
      title: "申请状态",
      width: "150",
      cell: (h, { row }) => {
        const statusNameListMap = {
          0: {
            label: "审批通过",
            theme: "success",
            icon: <CheckCircleFilledIcon />,
          },
          1: {
            label: "审批失败",
            theme: "danger",
            icon: <CloseCircleFilledIcon />,
          },
          2: {
            label: "审批过期",
            theme: "warning",
            icon: <ErrorCircleFilledIcon />,
          },
        };
        return (
          <t-tag
            shape="round"
            theme={statusNameListMap[row.status].theme}
            variant="light-outline"
          >
            {statusNameListMap[row.status].icon}
            {statusNameListMap[row.status].label}
          </t-tag>
        );
      },
    },
    { colKey: "channel", title: "签署方式", width: "120" },
    { colKey: "detail.email", title: "邮箱地址", ellipsis: true },
    { colKey: "matters", title: "申请事项", ellipsis: true },
    { colKey: "createTime", title: "申请时间" },
    {
      colKey: "operation",
      title: "操作",
      cell: (h, { row }) => (
        <t-link hover="color" theme="primary">
          {row.status === 0 ? "查看详情" : "再次申请"}
        </t-link>
      ),
      width: 120,
      foot: "-",
      fixed: fixedRightColumn ? "right" : undefined,
    },
  ];
}
const staticColumn = ["applicant", "operation"];
export default {
  data() {
    return {
      data: getData(TOTAL),
      TOTAL,
      headerAffixedTopProps: { offsetTop: 0, zIndex: 1000 },
      // 重要：如果在预渲染场景下，初次渲染的表格宽度和最终呈现宽度不一样，请异步设置表头吸顶
      headerAffixedTop: true,
      footerAffixedBottom: false,
      fixedLeftColumn: true,
      fixedRightColumn: true,
      horizontalScrollAffixedBottom: true,
      paginationAffixedBottom: true,
      // 表尾有一行数据
      footData: [{ index: "footer-row-1", type: "全部类型", description: "-" }],
      columns: [],

      displayColumns: staticColumn.concat([
        "channel",
        "status",
        "detail.email",
        "createTime",
        "matters",
      ]),
    };
  },

  watch: {
    // 底部滚动条 和 Footer 无需同时出现，二选一即可
    horizontalScrollAffixedBottom(val) {
      val && (this.footerAffixedBottom = false);
    },
    // 底部滚动条 和 Footer 无需同时出现，二选一即可
    footerAffixedBottom(val) {
      val && (this.horizontalScrollAffixedBottom = false);
    },
    // 左侧固定列发生变化时
    fixedLeftColumn: {
      handler(val) {
        this.columns = getColumns(this.$createElement, {
          fixedLeftColumn: val,
          fixedRightColumn: this.fixedRightColumn,
        });
      },
      immediate: true,
    },
    // 右侧固定列发生变化时
    fixedRightColumn(val) {
      this.columns = getColumns(this.$createElement, {
        fixedLeftColumn: this.fixedLeftColumn,
        fixedRightColumn: val,
      });
    },
  },

  methods: {
    // type 可选值：foot 和 body
    rowClassName({ type }) {
      if (type === "foot") return "t-tdesign__custom-footer-tr";
      return "t-tdesign__custom-body-tr";
    },
    onDragSortChange({ newData }) {
      this.columns = newData;
    },
  },
};
</script>

[xiaosansiji]

fixed in 1.5.0