elementui后端排序-element-ui Table组件同时对多列进行排序

也想出现在这里？点击联系我~

立即下单

进入商城

进不了网站？换个网络试试！

要求：将同名产品排列在一起时，按第一个数值排序，并以产品尺寸分隔*

达到疗效：

排序前：

排序后：

实施的核心业务：

1、给表绑定sort-change事件，并为product size列指定sort-method的排序方式

<el-table
      ref="productTable"
      :data="productTableData"
      :border="true"
      :highlight-current-row="true"
      v-loading="productTableLoading"
      @sort-change="sortChange"
      @selection-change="(selection)=>{selectList=selection}"
      @row-click="row=>{$refs.productTable.toggleRowSelection(row)}"
      :row-key="row=>row.id"
    >
      
      
      
      
      
      

2、点击排序时，会先执行sortChange中的代码elementui后端排序，判断点击是否针对产品尺寸栏。 如果是，记录当前的排序方式。 this.saveTableData是从前端获取到的原始数据的备份。 如果排序方式为null的话，则表中数据使用原始数据； 否则，对产品名称进行排序elementui后端排序，并将相同的产品名称排列在一起

3. 之后会执行sortMethod，将第一个参数中具有相同产品名称的按照大小进行排序。 如果产品名称不同或者当前排序方式为空，则维持当前状态（返回0）

methods: {
    sortChange ({ column, prop, order }) {
      if (prop === 'product_size') {
        this.orderType = order
        if (order === null) {
          this.productTableData = JSON.parse(JSON.stringify(this.saveTableData))
        } else {
          this.productTableData.sort((a, b) => {
            if (a.product_name > b.product_name) {
              return 1
            }
            if (a.product_name < b.product_name) {
              return -1
            }
            return 0
          })
        }
      }
    },
    sortMethod (a, b) {
      if (this.orderType === null) {
        return 0
      }
      if (a.product_name !== b.product_name) {
        return 0
      }
      let diamA = a.product_size.split('*')[0]
      let diamB = b.product_size.split('*')[0]
      return diamA - diamB
    },

4、为了让新数据保持当前的排序状态，我们需要在从前端获取到表数据后立即使用sort()对表进行手动排序

getList () {
      this.productTableLoading = true
      getProductList(this.searchForm).then(res => {
        // console.log(res)
        if (res.data.status === 200) {
          this.productTableData = res.data.data
          this.saveTableData = JSON.parse(JSON.stringify(res.data.data))
          this.$refs.productTable.sort('product_size', this.orderType)
          this.productTableTotal = res.data.total
          this.productTableLoading = false
        } else {
          this.$message.error(res.data.msg)
        }
      })
    }