場景

后臺一次性返回全部數(shù)據(jù)，需要前端對所有數(shù)據(jù)進(jìn)行分頁和排序。

思路

使用element-ui的 自定義排序 規(guī)則，將 sortable 設(shè)置為 custom ，同時在 Table 上監(jiān)聽 sort-change 事件，在事件回調(diào)中可以獲取當(dāng)前排序的字段名和排序順序，從而對所有數(shù)據(jù)進(jìn)行排序再對表格數(shù)據(jù)進(jìn)行分頁計算。

代碼

<el-table
        :data="currentPageData"
        :header-cell-style="{background:'#eef1f6',height: '48px'}"
        @sort-change="sortChange"
        border
        style="width: 100%;">
        
       /* 需要排序的列 */ 
      <el-table-column
          prop="report_type"
          label="取值"
          sortable="custom"
          width="200">
      </el-table-column>
	
	  /* 需要排序的列 */ 	
      <el-table-column
          prop="report_type_desc"
          label="中文映射"
          sortable="custom"
          width="200">
      </el-table-column>

      <el-table-column
          prop="remark"
          label="備注">
      </el-table-column>

      <el-table-column
          label="操作"
          width="250">
        <template slot-scope="scope">
          <el-button type="primary" size="mini" @click="edit(scope.row)">修改</el-button>
          <el-button type="success" size="mini" @click="copy(scope.row,scope.$index)">復(fù)制</el-button>
          <el-button type="danger" size="mini" @click="del(scope.row)">刪除</el-button>
        </template>
      </el-table-column>
    </el-table>

	// 排序
    sortChange({ prop, order }){
      this.allData.sort(this.compare(prop, order));
    },

	/**
     * 排序比較
     * @param {string} propertyName 排序的屬性名
     * @param {string} sort ascending(升序)/descending(降序)
     * @return {function}
     */
    compare(propertyName, sort) {
    	// 判斷是否為數(shù)字
        function isNumberV(val) {
            var regPos = /^\d+(\.\d+)?$/; //非負(fù)浮點數(shù)
            var regNeg = /^(-(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*)))$/; //負(fù)浮點數(shù)
            if (regPos.test(val) || regNeg.test(val)) {
                return true;
            } else {
                return false;
            }
        }
        
        return function (obj1, obj2) {
            let value1 = obj1[propertyName];
            let value2 = obj2[propertyName];
            // 數(shù)字類型的比較
            if(isNumberV(value1) || isNumberV(value2)){
                if (sort === "ascending") {
                    return value1 - value2;
                } else {
                    return value2 - value1;
                }
            }
            // 布爾值的比較：利用減法-轉(zhuǎn)化true 和 false
            // true => 1   false ? 0
            // true-false => 1  false-true => -1
            // 下面方法是按照先false后true的順序排序，如果想先true后false，調(diào)整value1-value2 和  value2 - value1的順序即可
            else if(_.isBoolean(value1) && _.isBoolean(value2)){
                if (sort === "ascending") {
                    return value1 - value2;
                } else {
                    return value2 - value1;
                }
            }
            // 字符比較使用localeCompare()
            else {
                const res = value1.localeCompare(value2, "zh");
                return sort === "ascending" ? res : -res;
            }
        };
    }

總結(jié)

如上封裝的 compare 方法適合用于任何數(shù)據(jù)的排序。文章來源地址http://www.zghlxwxcb.cn/news/detail-506706.html

到了這里，關(guān)于element ui - el-table數(shù)據(jù)排序的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！