a-table

a-table简单使用。

文章目录

• 一、a-table属性解释
• 二、设置rowkey的三种方式
• 三、分页点击无效
• 四、columns示例
• 总结

---

一、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">

二、设置rowkey的三种方式

每一种设置都需要保证rowkey不重复

三、如果分页点击无效，可能是没有添加@change="handleTableChange"事件

四、columns示例

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简单使用。