ant design中a-table 的record
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了ant design中a-table 的record相关的知识，希望对你有一定的参考价值。
参考技术A text表示当前行的值，record表示当前行的数据经过测试得出以下结论：
对于要进行render 的列，如果写了对象里dataIndex这个变量，那么render的传参就按照截图中的三个参数来执行，第一个是该行对应的具体值，就是dataIndex指定的那个xxx，对应到dataSource里面对应的xxx
如：
const dataSource1 = [
"parentId": "0",
"_id": "1",
"name": "家用电器1",
"__v": 0,
"place":'xx1'
,
"parentId": "0",
"_id": "2",
"name": "家用电器2",
"__v": 0,
"place":'xx2'
,
"parentId": "0",
"_id": "3",
"name": "家用电器3",
"__v": 0,
"place":'xx3'
,
"parentId": "0",
"_id": "4",
"name": "家用电器4",
"__v": 0,
"place":'xx4'
,
];
render()
this.columns = [
title: '分类名称',
dataIndex: 'place',
,
title: '操作',
width: 300,
dataIndex: 'name',
render: (text,category) => (//
<span>
<LinkButton>修改分类</LinkButton>
/* 如何向事件回调函数传递参数：先定义一个匿名函数，在函数中调用处理函数，并传入数据 */
<LinkButton onClick=()=>this.showSubCategorys(category)>查看子分类</LinkButton>
</span>
)
,
];
//显示指定一级分类对象的二级子列表
showSubCategorys = (category) =>
// 更新状态
this.setState(
parentId:category._id,
parentName:category.name
,()=>//在状态更新且重新render()后执行
console.log('parentId',this.state.parentId)
// 获取二级分类列表显示
this.getCategorys()
)
console.log(category);
起作用的是dataIndex,对于不用render的第一列来说，显示的就是dataIndex指定的DataSource里的place对应的比如xx1；
对于需要render的第二列来说，设置了onClick函数，输出的是第二个参数，也就是record，打印的是整个对象，
当然列表的从上到下顺序是DataSource数组的index顺序
"parentId": "0",
"_id": "1",
"name": "家用电器1",
"__v": 0,
"place":'xx1'
,
那么此时的第一个参数应该是什么呢，将text添加进render中进行查看
render: (text,category) => (//
<span>
<LinkButton>text</LinkButton>
/* 如何向事件回调函数传递参数：先定义一个匿名函数，在函数中调用处理函数，并传入数据 */
<LinkButton onClick=()=>this.showSubCategorys(category)>查看子分类</LinkButton>
</span>
)
可见，text指定的是dataIndex指定的name，对应到DataSource里的name，
如果此时删掉render中的dataIndex，如果还保留三个参数，因为写了回调函数需要用到第二个record参数，所以要求该参数必须要有意义，结果便是，两个参数均是record参数对象，所以通常保留一个便是
title: '操作',
width: 300,
render: (text,category) => (//
<span>
<LinkButton>修改分类</LinkButton>
/* 如何向事件回调函数传递参数：先定义一个匿名函数，在函数中调用处理函数，并传入数据 */
<LinkButton onClick=()=>this.showSubCategorys(text,category)>查看子分类</LinkButton>
</span>
)
,
//显示指定一级分类对象的二级子列表
showSubCategorys = (text,category) =>
// 更新状态
this.setState(
parentId:category._id,
parentName:category.name
,()=>//在状态更新且重新render()后执行
console.log('parentId',this.state.parentId)
// 获取二级分类列表显示
this.getCategorys()
)
console.log(text);
console.log(category);
this.columns = [
title: '分类名称',
dataIndex: 'name',
key: 'name',
,
title: '操作',
width: 300,
dataIndex: 'name',//这个参数对render的传参起作用，如果不写dataIndex，那么render的第一个参数就是整行的对象
//如果写了这个参数，那么第一个text参数就是这行的值，第二个record参数才是整行的数据对象
render: (text,category) => (//
<span>
<LinkButton>修改分类</LinkButton>
/* 如何向事件回调函数传递参数：先定义一个匿名函数，在函数中调用处理函数，并传入数据 */
<LinkButton onClick=()=>this.showSubCategorys(category)>查看子分类</LinkButton>
</span>
)
,
];
Ant Design Vue 的 table rowSelection里面去掉全选框
Ant Design Vue 的 table rowSelection里面去掉全选框
解决办法: columnTitle:‘ ‘ 设置为空即可
<a-table :columns="columns" :data-source="data" :customRow="clickRow" :rowKey="(record,index)=>{return index}" :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange,columnTitle:‘ ‘ }"> </a-table>
以上是关于ant design中a-table 的record的主要内容，如果未能解决你的问题，请参考以下文章
Ant-Design-Vue中关于Table组件的使用（初级）
基于Ant Design Vue创建的vue项目中表格组件的使用
Ant Design Vue 的 table rowSelection里面去掉全选框