table 固定列问题

[wfq1095745112]

固定列 设置前4列固定，往后拖动会依次隐藏上级，后列固定也是最初只显示最后一列，能不能固定多少就多少？不需要这种设定

[xughv]

没太懂什么表现

[wfq1095745112]

"dependencies": {
"final-form": "^4.20.10",
"moment": "^2.29.4",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-final-form": "^6.5.9",
"react-router-dom": "^6.16.0",
"tea-component": "^2.7.9"
},
"devDependencies": {
"@types/react": "^18.2.15",
"@types/react-dom": "^18.2.7",
"@vitejs/plugin-react-swc": "^3.3.2",
"eslint": "^8.45.0",
"eslint-plugin-react": "^7.32.2",
"eslint-plugin-react-hooks": "^4.6.0",
"eslint-plugin-react-refresh": "^0.4.3",
"vite": "^4.4.5"
}

这是package包，大概是react18版本会这样，fixed的列left right 都是0，没有值

[xughv]

所有固定列堆叠在 0 的位置？不知道怎么复现下

可以升级组件到最新，给个具体使用的示例看看

[wfq1095745112]

现在框架版本是2.7.9应该没有修复这个吧？上面是我直接复用文档table示例都会这样，用vite 创建个react项目丢进去就会有这个问题

[wfq1095745112]

看到2.8.0貌似有修复什么，是这个问题？

[xughv]

看到2.8.0貌似有修复什么，是这个问题？

应该不是，之前没收到过这个问题反馈，有可能是 React 18 下才会出现，我们看看

[xughv]

https://codesandbox.io/s/tea-component-demo-forked-3nhpdl

好像也没什么问题

[wfq1095745112]

https://codesandbox.io/s/tea-component-demo-forked-3nhpdl
这个react版本不是18.2 是16.9

[xughv]

https://codesandbox.io/s/tea-component-demo-forked-3nhpdl 这个react版本不是18.2 是16.9

是 18 呀

[wfq1095745112]

要不你用vite 创建个react项目引入试下？这是我copy 项目示例起的demo.jsx，问题会复现

import { useEffect, useRef, useState } from "react";
import { Button, Row, Col, Card, MetricsBoard, Icon, Bubble, Tabs, TabPanel, Select, Table, DatePicker, Input, Stepper } from "tea-component";

const { sortable, selectable, scrollable } = Table.addons;

const records = [
{ name: "Mario", age: 48, stage: "teenager", marriage: 0 },
{ name: "Luigi", age: 38, stage: "youth", marriage: 0 },
{ name: "Koopa", age: 28, stage: "youth", marriage: 1 },
{ name: "Yoshi", age: 18, stage: "youth", marriage: 0 },
{ name: "Link", age: 8, stage: "middle-aged", marriage: 2 },
{ name: "Zelda", age: 58, stage: "middle-aged", marriage: 1 },
{ name: "Wario", age: 68, stage: "elder", marriage: 3 },
{ name: "Pikachu", age: 78, stage: "elder", marriage: 4 },
];
const MARRIAGE_TEXT = ["未婚", "已婚", "离异", "再婚", "丧偶"];
const STAGE_TEXT = {
teenager: "少年",
youth: "青年",
"middle-aged": "中年",
elder: "老年",
};

export default function TableAddonExample() {
// 当前排序列
const [sorts, setSorts] = useState([]);
// 多选
const [selectedKeys, setSelectedKeys] = useState([]);

return (
<Table
records={[...records].sort(sortable.comparer(sorts))}
recordKey="name"
columns={[
{ key: "select", header: null, width: 26, fixed: "left" },
{ key: "name", header: "姓名", width: 100, fixed: "left" },
{ key: "age", header: "年龄", width: 100 },
{
key: "stage",
header: "年龄段",
render: x => STAGE_TEXT[x.stage],
},
{
key: "marriage",
header: "婚姻状态",
render: x => MARRIAGE_TEXT[x.marriage],
},
{
key: "desc",
header: "描述",
width: 2400,
render: () =>
"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
},
{
key: "opts",
header: "操作",
width: 100,
render: () => 修改,
fixed: "right",
},
]}
addons={[
selectable({
value: selectedKeys,
onChange: keys => setSelectedKeys(keys),
targetColumnKey: "select",
}),
sortable({
// 这两列支持排序，其中 age 列优先倒序
columns: ["name", { key: "age", prefer: "desc" }],
value: sorts,
onChange: value => setSorts(value),
}),
scrollable({
maxHeight: 192,
minWidth: 3200,
}),
]}
/>
);
}