Element UI实践及偏门功能总结

1. 修改表格筛选图标

ElementUI中的表格组件的筛选功能，老实说做的有点粗糙了，首当其中的便是icon了，下面就说下如果替换icon。

.xb-table {
  .el-icon-arrow-down::before {
    font-family: 'iconfont';
    // 使用你想要的替换图标字体
    content: '\e68f';
    font-size: 20px;
  }
}

2. 表格添加loading效果

el-table的v-loading属性可以指定显示隐藏loading效果,同时添加下列属性可以在加载的时候进行效果控制：
element-loading-background: 属性可以定义加载动画的背景，
element-loading-text:属性指定加载提示文字
element-loading-spinner:属性指定加载动画效果

3. 表格设置默认勾选项

Table组件设置对应行默认勾选上，就调用组件的内部方法toggleRowSelection，把对应项的数据传进入就可以了。

async getTableData() {
    const {data: { records } } = await queryBillData()
    this.billTableData = records.map(item => {
      // 根据自己的业务条件判断
      if (item.negativeFlag) {
        // 默认勾选对应项
        this.$refs.billTable.toggleRowSelection(item, true)
      }
      return item
    })
  }

4. 表格设置禁选项

Table组件设置对应行禁止勾选，可对 type=selection 列设置selectable属性的函数返回值来控制，返回值为false，则该行禁止勾选。

5. 表格设置跨分页勾选数据

在实际工作中经常会有需求，在第一页勾选几条数据，翻到第二页勾选，然后再返回第一页查看，希望第一页勾选的数据依旧是勾选状态。在Table组件中可以通过设置type=selection列的reserve-selection属性为true和table指定row-key属性来控制，注意：row-key属性接收一个函数，函数返回值必须是列表数据中唯一的字段(一般使用id)。