ant-design-vue table解析与使用
Ant Design Vue是一个基于Vue.js的UI组件库，其中包含了丰富的常用组件。其中的表格组件Table非常实用，可以方便地展示数据并支持排序、筛选、分页等功能。
Table 组件的 props 属性分为以下几类：
- 基本配置：columns、data、loading、locale
- 分页：pagination、rowKey、scroll
- 行属性：rowClassName、rowSelection、expandedRowRender、expandIconColumnIndex、expandIconAsCell
以下是一些常用的配置及用法：
# 基本配置
ant design
html
<template>
  <a-table :columns="columns" :data-source="dataSource" :loading="loading" :locale="locale"></a-table>
</template>
<script>
  export default {
    data () {
      return {
        columns: [
          {
            title: '姓名',
            dataIndex: 'name'
          },
          {
            title: '年龄',
            dataIndex: 'age',
            sorter: (a, b) => a.age - b.age
          },
          {
            title: '地址',
            dataIndex: 'address'
          }
        ],
        dataSource: [],  数据源
        loading: false,  是否加载中
        locale: {  国际化配置
          filterTitle: '筛选',
          filterConfirm: '确定',
          filterReset: '重置',
          emptyText: '暂无数据',
          selectAll: '选择全部',
          selectInvert: '反选',
          sortTitle: '排序'
        }
      }
    }
  }
</script>
# 分页
html
<template>
  <a-table :columns="columns" :data-source="dataSource" :pagination="pagination"></a-table>
</template>
<script>
  export default {
    data () {
      return {
        columns: [
          {
            title: '姓名',
            dataIndex: 'name'
          },
          {
            title: '年龄',
            dataIndex: 'age'
          },
          {
            title: '地址',
            dataIndex: 'address'
          }
        ],
        dataSource: [],  数据源
        pagination: {
          current: 1,  当前页码
          pageSize: 10,  每页条数

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。