antdv table 的表格列配置描述 columns

基本使用

1、配置 columns 属性，数据源数组 data-source —— span标签写插槽

<a-table :columns="columns" :data-source="data">
  <a slot="name" slot-scope="text">{{ text }}</a>
  <span slot="customTitle"><a-icon type="smile-o" /> 姓名</span>
  <span slot="tags" slot-scope="record">
    <a-tag
      v-for="tag in record"
      :key="tag"
      :color="tag === 'loser' ? 'volcano' : tag.length > 5 ? 'geekblue' : 'green'"
    >
      {{ tag.toUpperCase() }}
    </a-tag>
  </span>
  <span slot="action" slot-scope="text, record">
    <a>姓名 - {{ record.name }}</a>
    <a-divider type="vertical" />
    <a>删除</a>
    <a-divider type="vertical" />
    <a class="ant-dropdown-link"> 更多 <a-icon type="down" /> </a>
  </span>
</a-table>

export default {
  data() {
    return {
      data: [
        {
          key: '1', // 每个 data 设置key 或 rowKey，确保唯一性，不然会报错 
                    // Each record in table should have a unique `key` prop
          name: '张三',
          age: 32,
          address: 'New York No. 1 Lake Park',
          tags: ['nice', 'developer'],
        },
        {
          key: '2',
          name: '李四',
          age: 42,
          address: 'London No. 1 Lake Park',
          tags: ['loser'],
        },
        {
          key: '3',
          name: '王五',
          age: 32,
          address: 'Sidney No. 1 Lake Park',
          tags: ['cool', 'teacher'],
        },
      ],
      columns: [
         {
           dataIndex: 'name',  // 列数据在数据项中对应的 key
           slots: { title: 'customTitle' },  // 通过该属性配置支持 slot 的属性
           scopedSlots: { customRender: 'name' } // 通过该属性配置支持 slot-scope 的属性
         },
         {
           title: '年龄',
           dataIndex: 'age',
         },
         {
           title: '地址',
           dataIndex: 'address',
         },
         {
           title: '标签',
           dataIndex: 'tags',
           scopedSlots: { customRender: 'tags' },
         },
         {
           title: '操作',
           scopedSlots: { customRender: 'action' },
         },
       ]
     }
   }
 }

显示结果: 2、template 风格的 API（需要设置key属性）—— a-table-column 列标签 直接用

<a-table :data-source="data">
  <a-table-column key="name" data-index="name">
    <span slot="customTitle"><a-icon type="smile-o" /> 姓名</span>
  </a-table-column>
  <a-table-column key="age" title="年龄" data-index="age" />
  <a-table-column key="address" title="地址" data-index="address" />
  <a-table-column key="action" title="操作">
    <template slot-scope="text, record">
      <span>
        <a>姓名 - {{ record.name }}</a>
        <a-divider type="vertical" />
        <a>删除</a>
      </span>
    </template>
  </a-table-column>
</a-table>

columns 常用 API

对某一列数据进行筛选，使用列的 filters 属性来指定需要筛选菜单的列，onFilter 用于筛选当前数据，filterMultiple 用于指定多选和单选。

对某一列数据进行排序，通过指定列的 sorter 函数即可启动排序按钮：
sorter: function(rowA, rowB) { ... }， rowA、rowB 为比较的两个行数据；
如果是服务端进行排序，设置 sorter 为 true，再设置 sortOrder 属性

sortDirections: ['ascend' | 'descend']改变每列可用的排序方式，切换排序时按数组内容依次切换，设置在 table props 上时对所有列生效。 使用 defaultSortOrder 属性，设置列的默认排序顺序。

table表格的 change 事件

触发条件：分页 、筛选、排序 变化时触发

接收参数：

Function(pagination, filters, sorter, { currentDataSource })

使用：

<a-table :columns="columns" :data-source="data" @change="onChange" />

methods: {
  onChange: (pagination, filters, sorter) => {
    console.log('params', pagination, filters, sorter)
  }
}