ant中vue-table的使用(排序 搜索筛选)

官网api https://www.antdv.com/components/table-cn/
虽然用法很多 但是很多API并没有写出实际的例子
并且原来我用的element 到这里初次使用很难看得懂,.

<a-table
  :columns="columns" // 表头
  :dataSource="data" // 数据源
  :loading='loading' // 加载loading
  :pagination="pagination"  // 页脚
  :scroll="scroll" // 控制table的滚动
  :rowKey="setTableKey" // 每一行定义一个单独的key
  :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}" // 
  :customRow="customClick" // 点击每一行的事件
  @change="handleTableChange" // 表格的change事件
  >
  <span slot="action" slot-scope="record">
     // slot="action" 插槽名
     // slot-scope="record" // 该插槽内部能搞抓取到的改行的数据
     // 也可展示改行对应的内容 {{ record.name }}
    <a href="javascript:;"  @click.stop="editHandle(record)">编辑</a>
    <a-divider type="vertical"/>
    <a href="javascript:;" @click.stop="deleteRecord(record)">删除</a>
  </span>
</a-table>

很奇怪 ant的原则是一个标签加数据就渲染出一个列表.外面看着简单了 但是列里面的内容都需要自己配置. 列头columns更是直接抹去了 需要自己配置…

columns: [
  {
    title: '性别', // 该列展示的title
    dataIndex: 'sex', // 对应标志，与dataSource中数据匹配的标识符，支持"info.sex"的方式
    filters: [ // 筛选功能，该数组表示刷选的选项值，change事件获取的为 value，text为展示内容
      { text: '男', value: 'male' },
      { text: '女', value: 'female' },
    ],
    filterMultiple: false, // false为单选
    filteredValue: [], // 受控状态，加上它时，则需要在change事件中，手动的给它赋值，
    // 它表示选中的数据，对应的数据高亮，可以手动清除状态
  },
  {
    title: '登记日期',
    dataIndex: 'registDate', 
    sorter: true, // true，表示该列出现排序icon,在change事件中，能监听到对应的数据变化
  },
  {
    width: '100px', // 该列的宽度，支持百分比等
    title: '操作',
    key: 'action',
    dataIndex: '',
    fixed: 'right',
    scopedSlots: { customRender: 'action' }, // customRender 对应table中的插槽名，可以在每行自定义展示的内容，
  },
],

我还要自己去数据里面这么配置…但是 表头我想加一个图片什么的…得用插槽了…包括搜索按钮什么的

分页设置:

pagination: {
  // 分页配置器
  pageSize: 10, // 一页的数据限制
  current: 1, // 当前页
  total: 10, // 总数
  hideOnSinglePage: false, // 只有一页时是否隐藏分页器
  showQuickJumper: true, // 是否可以快速跳转至某页
  showSizeChanger: true, // 是否可以改变 pageSize
  pageSizeOptions: ['5', '10', '30'], // 指定每页可以显示多少条
  // onShowSizeChange: (current, pagesize) => { // 改变 pageSize时的回调
  //   this.pagination.current = current
  //   this.pagination.pageSize = pagesize
  //   ....
  // },
  // onChange: (current) => { // 切换分页时的回调，
  // 当在页面定义change事件时，切记要把此处的事件清除，因为这两个事件重叠了，可能到时候会导致一些莫名的bug
  //   this.pagination.current = current
  // },
  showTotal: total => `总数：${total}人`, // 可以展示总数
},

表头是否支持选择

<a-table
                :row-selection="rowSelection"
                :data-source="data"
                :columns="columns"
       >
            </a-table>

change事件的触发:

 <a-table
                :row-selection="rowSelection"
                :data-source="data"
                :columns="columns"
                @change="onChange"
            >
            </a-table>
分页、排序、筛选变化时触发
handleTableChange(pagination, filters, sorter) {
  console.log(pagination, filters, sorter)
}