a-table
a-table简单使用。
文章目录
- 一、a-table属性解释
- 二、设置rowkey的三种方式
- 三、分页点击无效
- 四、columns示例
- 总结
一、a-table属性解释
<a-table
<!--dom操作的元素名称-->
ref="table"
size="small"
<!--布尔值,是否显示边框-->
bordered
<!--rowKey,具有唯一性,给每一行一个特殊标记,不给同时没给key(每一列的特殊标记)浏览器会报错-->
rowKey="id"
<!--数组,指定列表头,详细数据在data中-->
:columns="columns"
<!--dataSource,数组,数据来源,数组中的每一个对象都是一行的数据-->
:dataSource="dataSource"
<!--分页器参数-->
:pagination="ipagination"
:loading="loading"
<!--是否可选行,选中行的id,change事件-->
:rowSelection="{fixed:true,selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
@change="handleTableChange">
二、设置rowkey的三种方式
每一种设置都需要保证rowkey不重复
<!-- number为表格数据data中的一个属性,此时不需要:冒号 -->
<a-table
ref="table"
size="middle"
rowKey="number"
:columns="columns"
:data-source="data""
>
<!-- record为为每条数据,index为索引 -->
<a-table
ref="table"
size="middle"
:rowKey="(record,index)=>{return index}"
:columns="columns"
:data-source="data""
>
<!-- number为表格数据data中的一个属性 -->
<a-table
ref="table"
size="middle"
:rowKey="record=>record.number"
:columns="columns"
:data-source="data""
>
三、如果分页点击无效,可能是没有添加@change="handleTableChange"事件
四、columns示例
a-table及数据列如下:
<a-table
ref="table"
size="small"
bordered
rowKey="id"
:columns="columns"
:dataSource="dataSource"
:pagination="ipagination"
:loading="loading"
:rowSelection="{fixed:true,selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
@change="handleTableChange">
<template slot="dealTime" slot-scope="dealTime">
{{ dealTime | dealTimeFormat()}}
</template>
<template slot="detail" slot-scope="text, record, index">
<a @click="showDetail(record)">查看详情 </a>
</template>
</a-table>
columns: [
{
title: '序号',
dataIndex: '',
key:'rowIndex',
width:60,
align:"center",
customRender:function (t,r,index) {//行号
return parseInt(index)+1;
}
},
{
title:"姓名" ,
align:"center",
dataIndex: 'name'//直接使用,不做特殊处理
},
{
title: "性别",
align: "center",
dataIndex: 'gender',
customRender: (text) => {//自定义处理
if(text){
return text=="1" ?"男":"女"
}
}
},
{
title:"时间" ,
align:"center",
dataIndex: mail,
scopedSlots: { customRender: "dealTime" }//具名插槽使用过滤器
},
{
title:"部门",
align:"center",
dataIndex: 'dept_dictText'//使用数据字典
},
{
title: "详情",
dataIndex: 'detail',
align:"center",
scopedSlots: { customRender: 'detail' }//具名插槽添加点击事件
}
],
filters: {
dealTimeFormat(val) {
return moment(val).format('YYYY-MM');
},
},
总结
a-table简单使用。