antdv table 的表格列配置描述 columns

基本使用

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

  {{ text }}
   姓名
  
    
      {{ tag.toUpperCase() }}
    
  
  
    姓名 - {{ record.name }}
    
    删除
    
     更多  
  
 

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 列标签 直接用

  
     姓名
  
  
  
  
    
  
 

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 }) 

使用：

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