快捷導(dǎo)航

element-ui中表格設(shè)置正確的排序及設(shè)置默認(rèn)排序

更新時(shí)間：2023年05月05日 11:10:53 作者：魔鬼君

表格中有時(shí)候會(huì)有排序的需求,下面這篇文章主要給大家介紹了關(guān)于element-ui中表格設(shè)置正確的排序及設(shè)置默認(rèn)排序的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下

本文主要解決兩個(gè)問題，第一個(gè)，在element-ui中，直接設(shè)置參數(shù)排序，達(dá)不到預(yù)期效果，預(yù)期是按照數(shù)字的大小進(jìn)行排序；第二個(gè)，想對(duì)表格中某個(gè)字段設(shè)置默認(rèn)的排序方式

現(xiàn)象：
直接設(shè)置在 el-table-column設(shè)置sortable=true,點(diǎn)擊升序降序，結(jié)果是字符串的排序結(jié)果，不是預(yù)期的按照數(shù)字大小排序，結(jié)果如下

<el-table-column :sortable="true" label="學(xué)號(hào)" ></el-table-column>

要達(dá)到預(yù)期，需要設(shè)置sort-method

<el-table-column
    :sortable="true"
    :sort-method="sortMethod"
    prop="no"
    label="學(xué)號(hào)"
    show-overflow-tooltip
 ></el-table-column>
// 按照數(shù)字大小排序 方法-
sortMethod(before, after) {
  return Number(before.no) - Number(after.no);
},
// 按照數(shù)字大小排序 方法二
sortMethod(before, after) {
  return before.no.localeCompare(after.no,"en-u-kn-true")
},

預(yù)期結(jié)果如下

此時(shí)可能會(huì)有進(jìn)一步的需求，前端設(shè)置默認(rèn)的排序方式，例如：默認(rèn)設(shè)置成升序，此處提供兩種
1、初始化數(shù)據(jù)時(shí)，先排序再渲染（此處就不展示例子了，直接通過對(duì)數(shù)據(jù)排序就行）
2、通過調(diào)整組件參數(shù)，直接設(shè)置默認(rèn)排序方式
在實(shí)踐第二種設(shè)置默認(rèn)排序方式的時(shí)候，遇到一個(gè)問題，直接設(shè)置default-sort={prop:'no'},基本滿足默認(rèn)排序的情況，但是會(huì)有不太完美的地方，初次進(jìn)來點(diǎn)擊排序表頭空白處或者是點(diǎn)擊到取消了排序效果時(shí)，不會(huì)恢復(fù)到默認(rèn)的排序方式。
針對(duì)上面的情況，我們使用sort-change,監(jiān)聽到order不存在的時(shí)候，意思就是默認(rèn)進(jìn)來或者是排序效果被取消時(shí)，我們直接手動(dòng)的設(shè)置一下排序方式為默認(rèn)的，下面就是怎么實(shí)現(xiàn)
備注：order包含['ascending', 'descending', null]
參考官方文檔： https://element.eleme.cn/2.10/#/zh-CN/component/table

<el-table
      ref="table"
      :data="tableData2"
      tooltip-effect="dark"
      @selection-change="handleSelectionChange"
      :header-cell-class-name="cellClass"
      width="200"
      border
      :default-sort="{prop:'no'}"
      @sort-change="sortChange"
    >
 sortChange({ column, prop, order }) {
      if (!order) {
        this.$refs.table.sort("no", "ascending");
      }
    },

預(yù)期結(jié)果，初始化進(jìn)入頁(yè)面就默認(rèn)的是升序

通過上面的操作，就能達(dá)到預(yù)期的效果，此文章只針對(duì)前端排序哦，個(gè)人愚見，歡迎大家指教

總結(jié)

到此這篇關(guān)于element-ui中表格設(shè)置正確的排序及設(shè)置默認(rèn)排序的文章就介紹到這了,更多相關(guān)element-ui表格設(shè)置排序內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: