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">
        <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)
复制代码
  
分类：
 前端
 
标签：
 
Vue.js
 
  
 

      安装掘金浏览器插件
     
多内容聚合浏览、多引擎快捷搜索、多工具便捷提效、多模式随心畅享，你想要的，这里都有！
 前往安装
     
 

        学不完的前端