vue柱状图排序功能

表格数据排序与更新机制

最新推荐文章于 2025-07-16 15:06:05 发布

原创最新推荐文章于 2025-07-16 15:06:05 发布 · 1.6k 阅读

0 ·

CC 4.0 BY-SA版权

本文探讨了在前端开发中，如何实现表格数据的升序、降序及默认排序，并详细解析了通过Vue.js框架进行数据排序的方法。文章介绍了如何使用自定义函数sortAscMethod和sortDescMethod来对表格数据进行有效排序，以及如何通过$forceUpdate()方法强制更新视图。

<el-button type="primary" size="mini" @click="editSort(item,'row')">
    <span v-if="item.sort==='asc'"><i class="el-icon-caret-top"></i></span>
    <span v-else-if="item.sort==='desc'"><i class="el-icon-caret-bottom"></i></span>
    <span v-else><i class="el-icon-d-caret"></i></span>
</el-button>

for (let item1 of this.dragTo.rows) {
   item1.sort = 'dcaret'
}
editSort(o,type) {
      this.sortItem = o
      this.sortType = type
      switch (o.sort) {
        case 'asc':
            o.sort = 'desc';
            break;
        case 'desc':
            o.sort = 'dcaret';
            break;
        default:
            o.sort = 'asc';
            break;
        }
        if (this.sortType === 'row') {
          this.dragTo.columns.forEach(item => {
            item.sort = 'dcaret'
          })
          this.dragTo.values.forEach(item => {
            item.sort = 'dcaret'
          })
          this.dragTo.rows.forEach(item => {
            if (item.column === this.sortItem.column) {
              item.sort = this.sortItem.sort
            }
          })
        }
        this.$forceUpdate()
},
this.tableData.forEach((val, i) => {
                  Object.keys(val).forEach(key => {
                    this.dragTo.rows.forEach(item => {
                      if (key === item.alias) {
                        if (item.sort === 'asc') {
                          this.tableData.sort(sortAscMethod(key))
                        } else if (item.sort === 'desc') {
                          this.tableData.sort(sortDescMethod(key))
                        }
                      }
                    })
                  })
})
export function sortAscMethod(prop) {
  return function (obj1, obj2) {
    var val1 = obj1[prop]
    var val2 = obj2[prop]
    if (!isNaN(Number(val1)) && !isNaN(Number(val2))) {
      val1 = Number(val1);
      val2 = Number(val2);
    }
    if (val1 < val2) {
      return -1;
    } else if (val1 > val2) {
      return 1;
    } else {
      return 0;
    }
  }
}
export function sortDescMethod(prop) {
  return function (obj1, obj2) {
    var val1 = obj1[prop]
    var val2 = obj2[prop]
    if (!isNaN(Number(val1)) && !isNaN(Number(val2))) {
      val1 = Number(val1);
      val2 = Number(val2);
    }
    if (val1 < val2) {
      return 1;
    } else if (val1 > val2) {
      return -1;
    } else {
      return 0;
    }
  }
}