我们是，致力于打造优秀的一站式数据中台产品。我们始终保持工匠精神，探索前端道路，为社区积累并传播经验价值。
本文作者：佳岚
可编辑表格在数栈产品中是一种比较常见的表单数据交互方式，一般都支持动态的新增、删除、排序等基础功能。
交互分类
可编辑表格一般为两种交互形式：
- 实时保存的表格，即所有单元格都可以直接进行编辑。
- 可编辑行表格，即需要手动点击编辑才能进入行编辑状态。
对比两种交互形式：
- 第一种交互更加友好，但对应的性能开销会非常大，不需要手动进入单元格编辑状态。
- 对于第二种交互方式，更多的场景是在数据量很大，不需要频繁修改，或者批量更新会对后端数据库操作会有较大性能影响的场景下。它还有一个很好的好处就是在
编辑状态时，能够对已填入数据进行回退。
数栈产品中绝大多数都采用了第一种交互方式。
要实现一个可编辑表格，table 组件肯定是不可或缺，是否要引入 form 做数据收集，还要具体场景具体分析。
如果不引入 form , 采用自行管理数据收集的方式, 其一般实现如下。
const editabletable = () => {
const [datasource, setdatasource] = usestate([]);
const handleadd = () => {
const newdata = {
key: shortid(),
name: 'new user',
};
setdatasource([...datasource, newdata]);
};
const handledelete = (key) => {
const newdata = datasource.filter(item => item.key !== key);
setdatasource(newdata);
};
const handlechange = (value, key, field) => {
const newdata = datasource.map(item => {
if (item.key === key) {
return { ...item, [field]: value };
}
return item;
});
setdatasource(newdata);
};
const handlemove = (key, direction) => {
const index = datasource.findindex(item => item.key === key);
const newdata = [...datasource];
const [item] = newdata.splice(index, 1);
newdata.splice(direction === 'up' ? index - 1 : index 1, 0, item);
setdatasource(newdata);
};
const columns = [
{
title: 'name',
dataindex: 'name',
render: (text, record) => (
handlechange(e.target.value, record.key, 'name')}
/>
),
},
{
title: 'action',
dataindex: 'action',
render: (_, record) => (
),
},
];
return (
);
};
export default editabletable;
存在的问题：
- 无法对每行进行单独校验。
- 组件完全受控，表单数量很多时输入会卡顿严重。
优点：
- 非常灵活。
- 不用考虑
form 的依赖渲染问题。
- 可进行表格前端分页，这能一定程度上解决性能问题。
如果使用 form ，最正确的做法是通过 form.list 来实现。 form 在绑定字段时，namepath 如果是字符串数组 ["user", "name"]，则会收集为对象结构 user.name ，如果 namepath 包含整型，则收集为数组 ["users", 0, "name"] ⇒ users[0].name 。
form.list 中会暴露出维护的 fields 元数据与增删移动操作的 opeartion , 那么与 table 相结合，实现起来会变得更加简单。
其中 field 对象包含 key 与 name ，key 是单调递增无重复的，如果删除了该数据，则 name 为其在数组中的下标。
我们为 formitem 注册的 name 虽然是 [0, "name"] ，但是处于 form.list 中的 form.item 组件都会自动拼上 parentnameprefix 前缀，也就是最终会变成 [”users”, 0, “name”] 。
{(fields, operation) => (
<>
(
),
},
{
title: "操作",
key: "actions",
render: (_, field) => (
),
},
]}
pagination={{ pagesize: 3 }}
/>
)}
我们可以看到，使用 form.list 实现，甚至可以使用分页，我们通过 form.getfieldsvalue() 查看，数据是正常的。
为何被销毁的第一页的表单数据能够保存下来?
默认情况下 preserve 为 true 的字段在销毁时仍能保存数据，只是需要通过 getfieldsvalue(true) 才能拿到，但对于 form.list , 不需要加 true 参数也能拿到所有数据。
form.list 本身内部也是一个 form.item ，不过添加了 islist 来区分，不光是 list 中的子项，其本身也会被注册。如下图所示，表格中有 5 条数据，由于分页原因只有当前页的数据表单会在 form 中注册收集，
额外的会将 users 也单独作为一个字段进行收集。
然后，在 getfieldsvalue 源码中，直接就取了 form.list 注册的值。
因此，使用 form.list 完成分页，从源码层面分析下来是可行的，但实际没怎么见到有人这样配合用过。
应用
案例 1
以运行参数为例，其实现使用了 table 的自定义 components , 在 editablecell 中再去定义表单如何渲染。
const runparamsedittable = () => {
const [datasource, setdatasource] = usestate([])
const components = {
body: {
row: editableformrow,
cell: editablecell,
},
};
const initcolumns = () => {
return [
// xxx字段
];
};
const columns = initcolumns().map((col) => {
if (!col.editable) {
return col;
}
return {
...col,
oncell: (record, index) => ({
index,
record,
editable: col.editable,
dataindex: col.dataindex,
title: record[col.dataindex] || col.title,
errortitle: col.title,
save,
// 还有很多其他状态需要传递
}),
};
});
return (
添加运行参数
);
};
在 editablecell 中, 通常需要传递大量的 props 来和父组件进行通讯，且表格列定义与表单定义拆分成两个组件，这样写个人感觉太割裂了，且对于产品中绝大部分 editabletable 来说使用自定义 components 有点大题小用。
const editablecell = ({ editable, dataindex, children, save, ...restprops }) => {
const rendercell = () => {
switch (dataindex) {
case 'name':
return (
save(v)}>
);
// 所有其他字段
}
};
return
;
};
在代码中，实际又自定义了 row 来为每一行创建一个 form ，这样才实现的同时编辑多个行, 且 form 只是用来做校验的，后面都通过 save 来手动收集的。假如改为上述 form.list 的形式，那么这将会变得很好维护，在 onvalueschange 中将列表数据同步到上层 store 中。
个人认为 table 的自定义 components 应在表格行或单元格要维护一些自身状态时才应该去考虑，如行列拖拽，单元格可在编辑状态进行切换等场景下使用。
案例 2
每个表单项都是下拉框，且下拉选项是通过级联请求过来的。
在这里，我们可能会这样做，维护一个 state 用来存放不用数据库对应的数据表列表, 并以 dbid 为键。
const [tableoptionsmap, settableoptionsmap] = usestate(new map())
在 columns render 中直接消费对应的 tableoptions 进行渲染。
{() => {
const dbid = form.getfieldvalue(["list", field.name, "dbid"]);
const tableoptions = tableoptionsmap.get(dbid);
return (
{editable ? rendercell() : children}
