在项目中经常会遇到这样的需求 表格数据是需要编辑的 而且有联动的需求,比如 结论是单选形式 选了存疑的 才能选存疑类型 然后会在上面tag显示对应的人数 存疑 > 0 人就显红, 符合要求小于总数就显红 而且选择为符合要求后 还要清空存疑类型
在vue中这很好实现 得益于v-model的双向绑定, 才开始做react项目不久, 确实让我犯了难 只知道用render写自定义组件,但是里面内容不知道咋么写 form中的name咋办能获取到数组中每行的内容,而且数据是单向的。 而且antdPro官方的文档有些晦涩难懂,所以做出来后总结一下,希望也能给大家有所帮助。
首先配置可编辑列表的key
const defaultData: any[] = [
// 初始化数据源
// ...
{ type: '建造师', address: '156', id: '123456', jl: 0, cylx: [] },
{ type: '建师', address: '44', id: 33, jl: 0, cylx: [] },
{ type: '阮经天', address: '44', id: 313, jl: 0, cylx: [] },
{ type: '刘德华', address: '444', id: 343, jl: 0, cylx: [] },
];
// 这表示把数据源中所有的id作为可编辑表格key 也就是全部都可编辑,同时要在可编辑表格中type修改为多选
const [editableKeys, setEditableRowKeys] = useState<React.Key[]>(() =>
defaultData.map((item) => item.id),
);
//表格的响应式数据
const [dataSource, setDataSource] = useState(() => defaultData);
// tag的响应式数据
const [person, setPerson] = useState<Person>({
total: defaultData.length,
meetsRequirement: 0,
doubt: 0,
socialSecurityDoubt: 0,
certificateDoubt: 0,
majorNotMatch: 0,
});
然后就是对表格列的配置, 如果不希望这一列编辑 就editable:false
const columns: ProColumns[] = [
{
title: '序号',
width: 70,
// 本列不可编辑
editable: false,
render: (_: any, __: any, index: number) => {
return index + 1;
},
},
{
title: '姓名',
dataIndex: 'type',
editable: false,
width: 80,
key: 'age',
},
{
title: '身份证',
editable: false,
dataIndex: 'address',
key: 'address',
},
{
title: '年龄',
editable: false,
dataIndex: 'address',
width: 60,
key: 'address',
},
{
title: '证书专业',
editable: false,
dataIndex: 'address',
key: 'address',
},
{
title: '社保信息',
editable: false,
dataIndex: 'sbxx',
width: 80,
// 自定义该列的渲染
render: (_: any, record: any) => <SocialSecurityModal id={record.id} />,
key: 'address',
},
{
title: '系统提示 ',
editable: false,
dataIndex: 'address',
key: 'address',
},
{
title: '结论',
width: 220,
key: 'jl',
dataIndex: 'jl',
// 如果是可编辑的状态 就会渲染如下的组件 ,这里不需要绑定任何, 会自动被赋值到表格的dataSource中该列对应的dataIndex
renderFormItem: () => {
return (
<Radio.Group>
<Radio value={1}>符合要求</Radio>
<Radio value={2}>存疑</Radio>
</Radio.Group>
);
},
},
{
title: '存疑类型',
width: 330,
key: 'cylx',
// 是否可编辑的条件,如果选了存疑 返回true才可编辑
editable: (_: any, record: any) => record.jl === 2,
dataIndex: 'cylx',
// 这是第二种编辑渲染方式 有内置的valueType可以在antdPro官方文档查看
valueType: 'select',
// 这里设置对应valueType的子组件的属性 这里设置的就是select框的子属性
fieldProps: {
mode: 'multiple', // 添加 mode 属性以启用多选
},
valueEnum: {
majorNotMatch: '专业存疑',
certificateDoubt: '证书存疑',
socialSecurityDoubt: '社保存疑',
},
},
];
最后 再渲染这个editTable和Tips组件即可
<Tips
title="工程序列中级以上职称和注册建造师合计不少于3人,且结构、材料或化工等专业齐全。"
desc="技术工人"
person={person}
/>
<EditableProTable
className="mb-3"
columns={columns}
request={async () => ({
data: dataSource,
total: dataSource.length,
success: true,
})}
// 可伸展框的自定义渲染
expandable={{
expandedRowRender: (record) => (
<Descriptions bordered layout="vertical" column={5}>
<Descriptions.Item label="证书类型">{record.address}</Descriptions.Item>
<Descriptions.Item label="证书编号">{record.address}</Descriptions.Item>
<Descriptions.Item label="专业">{record.address}</Descriptions.Item>
<Descriptions.Item label="级别">{record.address}</Descriptions.Item>
<Descriptions.Item label="附件">{record.address}</Descriptions.Item>
</Descriptions>
),
}}
rowKey="id"
recordCreatorProps={false}
// 这两行一定要加 这样表格才是可控的,也就是双向绑定的!
value={dataSource}
controlled
// 表格数据变化时候触发,editable中也有个属性onValuesChange也是如此,试了下好像作用是一样的
onChange={(val) => {
console.log('onChange', val);
let meetsRequirement = 0;
let doubt = 0;
let socialSecurityDoubt = 0;
let certificateDoubt = 0;
let majorNotMatch = 0;
const res = val.map((item) => {
// 如果jl为符合要求,清空cylx数组
if (item.jl === 1) {
meetsRequirement++;
item.cylx = [];
} else if (item.jl === 2) {
doubt++;
}
if (item.cylx.length > 0) {
if (item.cylx.includes('socialSecurityDoubt')) {
socialSecurityDoubt++;
}
if (item.cylx.includes('certificateDoubt')) {
certificateDoubt++;
}
if (item.cylx.includes('majorNotMatch')) {
majorNotMatch++;
}
}
return item;
});
//一定要注意set一下 这就是和vue的区别 数据要自己设置回传,我感觉就是vue就是双向奔赴只管数据就行了,但在react中要你主动设置数据响应式,你不主动,就不会有故事,
setPerson({
...person,
doubt,
socialSecurityDoubt,
certificateDoubt,
majorNotMatch,
meetsRequirement,
});
setDataSource(() => res);
}}
toolBarRender={false}
editable={{
editableKeys,
type: 'multiple',
onChange: setEditableRowKeys,
}}
/>
刚开始写react确实很不适应 各位大佬还请批评指正
标签:cylx,编辑表格,editable,jl,item,react18,key,address,antdPro From: https://blog.csdn.net/ruan479118658/article/details/140696348