a-table 格式化处理数据
1.a-table 格式化处理列数据
<a-table
:rowKey="(record) => record.id"
:columns="columns"
:data-source="tableData"
:row-selection="{
selectedRowKeys: selectedRowKeys,
onChange: onSelectChange,
}"
:pagination="false"
>
<template slot="sex" slot-scope="text, row">
<span>{{row.sex === 'M' ? '男':'女'}}</span>
</template>
<template slot="opt" slot-scope="text, row">
<span class="cursor-pointer" style="margin-right: 8px;">详情</span>
<span class="cursor-pointer">编辑</span>
</template>
</a-table>
js部分:
格式化处理列数据的时候可以使用scopedSlots插槽的方式处理;也可以使用customRender处理。
在数据过长时,使用ellipsis显示省略号。用sorter去排序。align是指定对齐方式,可选’left’ 、‘right’ 、 ‘center’,默认是’left‘。
注:这里引入的filter.js是我自定义的格式化方法,替换成自己即可
import vFilter from "@/common/js/filter.js"
export default {
data() {
return {
tableData: [
{
key: 1,
name: "李娟",
age: 20,
sex: "M",
educationalBg: "本科",
graduateSchool: "湖南大学",
phoneNumber: "13897246875",
createTime: new Date(),
address: "湖南省长沙市雨花区兰亭玥岛"
},
{
key: 2,
name: "王城",
age: 18,
sex: "F",
educationalBg: "本科",
graduateSchool: "湖南师范大学",
phoneNumber: "13897246875",
createTime: new Date(),
address: "湖南省长沙市雨花区兰亭玥岛"
}
],
columns: [
{
title: "#",
key: "index",
align: "center",
width: 60,
customRender: (text, row, index)=> {
return {
children: index+1
}
}
},
{
title: "姓名",
dataIndex: "name",
key: "name",
align: "center",
width: 100
},
{
title: "性别",
dataIndex: "sex",
key: "sex",
scopedSlots: { customRender: "sex" }, // 1.使用插槽处理
// 2.使用function处理
// customRender: sex=> {
// return sex === 'M' ? ‘男’ : '女'
// }
align: "center",
width: 60,
sorter: (a, b) => a.age - b.age,// 排序
},
{
title: "年龄",
dataIndex: "age",
key: "age",
align: "center",
width: 60
},
{
title: "学历",
dataIndex: "educationalBg",
key: "educationalBg",
align: "center",
width: 100
},
{
title: "毕业院校",
dataIndex: "graduateSchool",
key: "graduateSchool",
align: "left",
},
{
title: "创建日期",
dataIndex: "createTime",
key: "createTime",
align: "center",
width: 200,
customRender: createTime => {
return vFilter.formaDate(createTime, "yyyy-MM-dd hh:mm:ss", false);
}
},
{
title: "手机号码",
dataIndex: "phoneNumber",
key: "phoneNumber",
width: 200,
align: "left"
},
{
title: "家庭住址",
dataIndex: "address",
key: "address",
ellipsis: true,
width: 200,
align: "left"
},
{
title: "操作栏",
key: "opt",
scopedSlots: { customRender: "opt" },
width: 200,
align: "center"
}
]
}
}