element ui中表格排序sortable请求后台接口

2,163 阅读1分钟

场景:后端排序

html

    <el-table
      :data="systemTagList"
      border
      style="width: 100%"
      :default-sort="{ prop: 'UsedCount', order: 'descending' }"
      @sort-change="sortChange" //排序函数
    >
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column prop="name" label="标签名"></el-table-column>
      </el-table-column>
      <el-table-column prop="UsedCount" label="使用次数" sortable="custom"></el-table-column>
    </el-table>

js(排序函数)

  //排序
  sortChange(column) {
    let { order } = column;
    if (order === 'ascending') {
      this.usedCountSort = 2;
    } else {
      this.usedCountSort = 1;
    }
  },

js(监听变化)

watch: {
  usedCountSort: {
    handler(newValue, oldValue) {
      if (newValue != oldValue) {
        this.refreshSystemTagList();
      }
    },
  },
},

js(接口请求)

   async getSystemTagList(page, page_size, callback) {
    let res = await this.$api.Tag.getSystemTagList({
      page: page,
      limit: page_size,
      search: this.search,
      public: true,
      createdType: this.createdType,
      usedCountSort: this.usedCountSort,
    });
  },