a-table

a-table简单使用。

---

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