vue + antd项目中关于Table的那些事儿之排序筛查

引言：笔者为前端小白，本文章是笔者初涉前端vue+antd的第一和第二个项目中代码分享，仅供初学者参考。

概要：利用antd组件库的table组件完成数据按格式渲染，分页/翻页，排序，查询，筛选功能；

注意：本demo前端分页；

步入正题：

1、引入antd组件库

$ npm i --save ant-design-vue

2、按需引入table组件

import Vue from 'vue';
import { Table } from 'ant-design-vue';

Vue.use(Table)

3、调用组件完成简单的数据渲染和分页

<!-- dom结构 -->
      <a-table
        row-key="id"
        :columns="columns"
        :loading="loading"
        :data-source="list"
        :pagination="pagination"
        @change="handlePageChange"
      >
        <template slot="operation" slot-scope="id, record">
          <a
            @click="() => handleClickEdit(record.id)"
          >
            编辑
          </a>
          <a
            @click="() => handleClickDelete(record.id)"
          >
            删除
          </a>
          <a @click="() => handleClickDetail(record.id)">
            详情
          </a>
        </template>
      </a-table>

<script>
const columns = [
  { title: "货品名称", dataIndex: "goods" },
  { title: "进货数量", dataIndex: "quantity" },
  { title: "单价", dataIndex: "price" },
  { title: "剩余数量", dataIndex: "rest" },
  { title: "创建者", dataIndex: "creater" },
  { title: "创建日期", dataIndex: "createTim