在写前端代码中，发现了一个新的工具avue，avue封装了大量的常用组件和插件库，如果需求合适（比如增删改查），用这个组件还是很方便，第一次使用实现表格，有些需要的注意的地方，记录下来。

首先，在HTML部分，代码如下：

<avue-crud
        ref="crud"
        :page="page"
        :data="tableData"
        :search.sync='searchForm'
        :table-loading="tableLoading"
        :option="tableOption"
        @on-load="getList"
        @search-change="searchChange"
        @refresh-change="refreshChange"
        @size-change="sizeChange"
        @current-change="currentChange"
        />

:page实现翻页

page: {
          total: 0, // 总页数
          currentPage: 1, // 当前页数
          pageSize: 10 // 每页显示多少条
        },

tableOption表示表格的表头

可通过一个js文件引入

export const tableOption = {
    border: true,
    index: true,
    indexLabel: '序号',
    stripe: true,
    align: 'center',
    // refreshBtn: true,
    showClomnuBtn: false,
    // searchSize: 'mini',
    searchMenuSpan: 6,
    searchShowBtn:false,
    refreshShowBtn:false,
    addBtn: false,
    editBtn: false,
    menu:false,//没有操作栏，其实操作栏中的内容可以自定义
    // viewBtn: true,
    props: {
      label: 'label',
      value: 'value'
    },
    column: [{
      label: '姓名',
      prop: 'name',
    }, {
      label: '年龄',
      prop: 'age',
      type: 'input',
      search: true
    },{
      width: 150,
      label: '出生时间',
      prop: 'createTime',
    //   format: 'yyyy-MM-dd HH:mm',
    //   valueFormat: 'yyyy-MM-dd HH:mm:ss',
      type: 'date',
      searchSpan:6,
      search: true
    },{
      label: '性别',
      prop: 'sex',
      type: 'select',
      dicData:[{
        label:'男',
        value:0
      },{
        label:'女',
        value:1
      }],
      search: true
    }]
  }

其中search为true，表示是搜索条件，dicData：表示搜索类型为下拉框时的选择项；searchSpan表示搜索框的宽度，searchForm的内容就是搜索条件。

avue-crud可以实现隐藏显示哪一列的功能，针对多列内容的显示，其实很适用