Element UI组件遇到的技巧记录

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"才可以远程排序


版权声明:本文为weixin_46591853原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。