[ { title: '姓名', //字段名 dataIndex: 'name', //字段 key: 'name', }, { title: '其他', children: [ { title: '年龄', dataIndex: 'age', key: 'age', }, { title: '地址', children: [ 对应
时间: 2024-04-27 08:19:48 浏览: 120
一个表格的配置项,其中包含了三个表头,分别是 "姓名","其他" 和 "地址"。
其中 "姓名" 表头只有一个字段,其字段名为 "name",数据索引也为 "name"。
"其他" 表头下有两个子表头,分别是 "年龄" 和 "地址"。
"年龄" 表头只有一个字段,其字段名为 "age",数据索引也为 "age"。
"地址" 表头下还有子表头,但这里没有给出具体配置项。
相关问题
antd 修改表格字段名,拖拽
要修改表格字段名,可以通过在Table组件里的columns属性中设置title属性实现,例如:
```
<Table
columns={[
{
title: '姓名',
dataIndex: 'name',
key: 'name',
},
{
title: '年龄',
dataIndex: 'age',
key: 'age',
},
{
title: '性别',
dataIndex: 'gender',
key: 'gender',
},
]}
dataSource={[
{
key: '1',
name: '张三',
age: 18,
gender: '男',
},
{
key: '2',
name: '李四',
age: 20,
gender: '女',
},
]}
/>
```
如果要实现拖拽功能,可以使用react-beautiful-dnd库或者antd的Table组件自带的拖拽排序功能。使用react-beautiful-dnd库需要自定义一些代码实现,比较复杂,antd的拖拽排序功能较为简单,只需要设置columns属性中的sortable属性为true即可,例如:
```
<Table
columns={[
{
title: '姓名',
dataIndex: 'name',
key: 'name',
sortable: true,
},
{
title: '年龄',
dataIndex: 'age',
key: 'age',
sortable: true,
},
{
title: '性别',
dataIndex: 'gender',
key: 'gender',
sortable: true,
},
]}
dataSource={[
{
key: '1',
name: '张三',
age: 18,
gender: '男',
},
{
key: '2',
name: '李四',
age: 20,
gender: '女',
},
]}
onChange={(pagination, filters, sorter, extra) => {
console.log('params', pagination, filters, sorter, extra);
}}
/>
```
其中,onChange属性可以监听表格的变化事件,可以在其中获取拖拽后的排序结果等信息。
使用表定义生成antd的Table组件列信息json定义:CREATE TABLE `ssr_dye` ( `dye_id` varchar(32) NOT NULL COMMENT '荧光信息主键ID', `dye_primer_name` varchar(32) DEFAULT NULL COMMENT '引物名称', `dye_code` varchar(32) DEFAULT NULL COMMENT '引物合成编号', `dye_color` varchar(32) DEFAULT NULL COMMENT '荧光颜色', `dye_comments` varchar(512) DEFAULT NULL COMMENT '备注信息', `dye_species` varchar(8) DEFAULT NULL COMMENT '荧光种属(M-玉米,R-水稻)', `dye_manager` varchar(32) DEFAULT NULL COMMENT '荧光负责人', `dye_create_date` datetime DEFAULT NULL, `dye_update_date` datetime DEFAULT NULL, PRIMARY KEY (`dye_id`), KEY `SSR_FLORESCENCE_NAME_INDEX` (`dye_primer_name`,`dye_code`) ) ENGINE=InnoDB DEFAULT CHARSET=utf8 COMMENT='引物合成编号信息表'
根据上述表定义生成antd的Table组件列信息json定义,可以参考以下代码:
```javascript
const columns = [
{
title: '荧光信息主键ID',
dataIndex: 'dye_id',
key: 'dye_id',
},
{
title: '引物名称',
dataIndex: 'dye_primer_name',
key: 'dye_primer_name',
},
{
title: '引物合成编号',
dataIndex: 'dye_code',
key: 'dye_code',
},
{
title: '荧光颜色',
dataIndex: 'dye_color',
key: 'dye_color',
},
{
title: '备注信息',
dataIndex: 'dye_comments',
key: 'dye_comments',
},
{
title: '荧光种属(M-玉米,R-水稻)',
dataIndex: 'dye_species',
key: 'dye_species',
},
{
title: '荧光负责人',
dataIndex: 'dye_manager',
key: 'dye_manager',
},
{
title: '创建时间',
dataIndex: 'dye_create_date',
key: 'dye_create_date',
},
{
title: '更新时间',
dataIndex: 'dye_update_date',
key: 'dye_update_date',
},
];
```
其中,每个列信息都由title、dataIndex和key属性组成。title表示列的标题,dataIndex表示列数据在数据源中对应的字段名,key表示列的唯一标识。可以根据实际情况进行修改和补充。
阅读全文