A-Table控件使用详解

一、功能介绍

当我们前端涉及到大量的结构化数据，如果有效且美观的展示变成了一大重点。

此时Table标签无所是最好的帮手，其自带分页展示功能，省去大量编码时间。

怎么样？是不是很清爽利落，而最为核心的一点，Table 已经内置封装了开发中常见业务需求，使用起来简直不要太方便，对于前端战五渣的我都能轻松上手。

二、页面展示

1. 依赖引入

这里用到的是 Ant Design，需要进行下载引用。

新建命令窗口运行如下命令，其中 –save 表示将依赖信息保存到项目的 package.json 文件中，如不需要去掉即可。

npm i --save ant-design-vue 

在 mian.js 中添加如下代码进行引用。

import Antd from 'ant-design-vue';
import 'ant-design-vue/dist/antd.css';
Vue.use(Antd);

2. 页面实现

组件 a-table 常用的标签的属性与其描述参考下表。

属性	描述
columns	用于设置表头。
data-source	用于设置表格内容。
pagination	用于设置分页参数。
bordered	控制是否显示单元格边框。

下面提供一个基本配置示例：

<template>
    <a-table
        :columns="columns"
        :data-source="data"
        :pagination="{ pageSize: 5 }"
        :bordered="false"
    />
</template>

<script>
import { columns, data } from "./const";
export default {
    data() {
        return {
            data,
            columns
        }
    }
}
</script>

三、表格内容

在上述的示例中我将 表头 样式属性单独存放在 js 文件中，并没有和官方文档一样直接放在 script 中，这样代码可读性更高。

下面就详细介绍一下如何使用。

1. 表头内容

注意 dataIndex 属性值要和 data 中的字段名一致才能自动识别，如果是从后端请求数据，则需要和返回的参数名一致。

export const columns = [
    {
        title: '用户名',
        ellipsis: true,
        dataIndex: 'userName'
    }, {
        title: '状态',
        dataIndex: 'status',
    }, {
        title: '操作',
        align: 'center',
        dataIndex: 'operation',
        scopedSlots: { 
            customRender: 'operation' 
        }
    }
]

2. 属性配置

同样表头数组元素的属性与其相应描述信息如下：

属性	描述
title	用于设置表头值。
width	用于设置表格所占的比例，所有列之和为 100% ，当设置为 0 时隐藏该列。
align	用于设置表头对其方式，取值范围：center、right、left 。
sorter	用于设置排序，设置为 true 表头会出现排序按钮。
ellipsis	控制内容过长时自动隐藏，设置为 true 时文本过长自动隐藏，鼠标悬浮时会自动显示。
dataIndex	用于设置字段值，自动读取 data 中同名属性字段值。
scopedSlots	配合插槽动态实现需求样式设计。

3. 事件绑定

上述中使用场景最多的配置即 scopedSlots，举个简单的例子，当后端提供的表格数据为状态码标识码，前台页面往往需要转化为再进行展示，而 scopedSlots 搭配插槽即可动态的需求样式设计。

具体实现如下，其中 slot-scope 的 text, record 为当前行的记录值，注意这里的 slot 必须和上面 customRender 中的值一致。

<template slot="operation" slot-scope="text, record, index">
    <a-button type="link" @click="ok()">新增</a-button>
</template>

在较新的 vue 版本中会显示 slot 与 slot-scope 弃用，可替换为下述方式。

<template #operation="text, record, index">
    <a-button type="link" @click="ok()">新增</a-button>
</template>

4. 数据填充

在实际开发场景中业务数据肯定是来自后端，下面介绍如何显示接口数据。这里请求数据用的是 Axios ，后端接口采用的是 Spring Boot RESUful。

表格中每条数据应单独设置唯一的 Key 值，可以使用 UUID() 函数生成。具体教程参考之间的文章：Axios二次封装，Spring Boot接口开发。

<script>
import { List } from '@/api/user.js';
import { columns } from "./const";

export default {
    data() {
        return {
        columns,
        data: [],
        }
    },
    created() {
        // 后端数据库
        List().then(res =>{
            this.data.push(res.data);
        })
    }
}
</script> 

四、进阶操作

1. 单元格事件

根据不同常见需要，我们可以给表格设置点击事件，如用户单击或双击表格某一条数据时可以做出对于响应。

具体实现也很简单，只需在 a-table 标签中添加 customRow 属性执行监控即可。

<a-table
  :customRow="customRow"
/>

在方法中设置监控双击。

methods: {
    customRow(record) {
        return {
            on:{
                click: (event) => {
                    console.log(record)
                    this.$message.success('你单击了记录')
                },
                dblclick: (event) => {
                    console.log(record)
                    this.$message.success('你双击了记录')
                }
            }
        }
    }
}

2. 自定义渲染

通过设置表头属性自定义渲染表格内容，如时间格式话、光标悬浮展示等等。

• 表头属性

  import moment from 'moment'
  
  export const columns = cxt => {
      // eslint-disable-next-line no-unused-vars
      const h = cxt.$createElement
      return [
      {
          title: '编号',
          dataIndex: 'id',
          align: 'center',
      }, {
          title: '时间',
          align: 'center',
          ellipsis: true,
          dataIndex: 'time',
          customRender: (record) => {
              // 格式化时间
              const _time = record !== null ? moment(record).format('YYYY-MM-DD') : '无'
              return <span>{_time}</span>
          },
          customCell: (record) => {
              // 单元格鼠标悬浮预览
              return {
                  attrs: {
                      title: record.name
                  }
              }
          }
      }
      ]
  }
  

• 页面代码

  <template>
      <a-table
          :columns="columns"
          :data-source="data"
      />
  </template>
  
  <script>
  import { columns } from "./const";
  
  export default {
      data() {
          return {
              data: []
          }
      },
      computed: {
          columns () {
              return columns(this)
          }
      }
  }
  </script>
  

五、自定义分页

默认的 a-table 无法动态定义表格每页展示数据，需要根据 pagination 进行手动配置，最终效果如下：

1. 页面内容

<template>
    <a-table
        :columns="columns"
        :data-source="data"
        :pagination="pagination"
    >
    </a-table>
</template>

2. 属性内容

<script>
import { columns } from './const'

export default {
    name: 'dataAccess', 
    data() {
        return {
            columns,
            data: [],
            pagination: {
                total: 0,
                defaultPageSize: 5,
                showSizeChanger: true,
                pageSizeOptions: ['5', '10', '20', '30'],
                showTotal: total => `共 ${total} 条数据`,
                onShowSizeChange: (current, pageSize) => this.pageSize = pageSize
            }
        }
    }
}
</script>