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"
         }
       ]
   }
}