Element UI组件遇到的技巧记录

table

子组件table排序清除高亮样式

情况记录：table是index的子组件，外部按钮点击重置所有查询条件，同时高亮样式也要清除

<!-- 父组件 -->
<goodsTable 
   style="margin-top:10px" 
   :loading="loading" 
   :tableData="tableData"
   @sortChange="sortChange" 
   ref="table"  // 需要加个ref属性 
   >
</goodsTable>

<!-- 子组件 -->
<el-table
   v-loading="loading"
   :data="tableData"
   ref="goodsTable"  // 需要加个ref属性 
   @sort-change="sortChange"
   size="medium"
      ......

// 重置方法
// 重置
    reset () {
      this.$refs.table.$refs.goodsTable.clearSort(); // 清除子组件table排序高亮样式，若不是子组件，直接this.$refs.goodsTable.clearSort()，调用到这个方法就好
      this.searchForm = {
        order: 5,
        orderType: null,
        size: 10,
        current: 1,
        order: 5,
        orderType: 2,
      }
      this.pageChange(1)
    },

补充：组件排序默认会自动排序当前页的数据，需要将sortable属性写成sortable="custom"才可以远程排序