赞
踩
在项目中使用el-table的默认排序功能产生问题,如按照数字排序,当数字有多位时,只按照第一位数字排序问题,
问题复现:
添加代码修改:
主要是这一行sort-method,传递的item.prop就是el-table-column 中的prop字段
:sort-method="(a, b) => sortMethod(item.prop, a, b)"
<el-table :data="tableData" style="width: 100%;background:transparent;" :height="tableMaxHeight" :header-cell-style='headerCellStyle' :header-row-style='headerRowStyle' :row-style='rowStyle' :cell-style="rowCellStyle" class="dealljtable projecttable tableindexstyle" @cell-mouse-enter="handlerTableOver" @cell-mouse-leave="handlerTableOut" > <el-table-column label="" type="index" width="60"> </el-table-column> <el-table-column :min-width="item.width || 80" v-for="item in headerKeys" :key="item.label" align="center" :fixed="item.fixed" :prop="item.prop" :minWidth="item.minWidth" :sortable="item.label === '成交套数' ? true : false" :sort-method="(a, b) => sortMethod(item.prop, a, b)" :sort-orders="['ascending', 'descending']"> <template slot="header"> <div class="header-wrap"> <span class="label">{{ item.label }}</span> <div class="unit" v-if="item.unit">({{ item.unit }})</div> </div> </template> <template slot-scope="scope"> <div class="handle-icon palterow" v-if="scope.column.property === 'caption'"> {{ scope.row[scope.column.property] != null ? scope.row[scope.column.property] : '-' }}--- </div> <div v-else class="handle-icon"> {{ scope.row[scope.column.property] != null ? scope.row[scope.column.property] : '-' }} </div> </template> </el-table-column> <template slot="empty"> <NoData></NoData> </template> </el-table> data(){ return{ headerKeys: [ { label: '项目名称', key: '', unit: '', prop: "caption", minWidth: '100', }, { label: '建筑年代', key: '', unit: '', prop: "buildingYear", minWidth: '80', }, { label: '成交套数', key: '', unit: '套', prop: "tradeCount", minWidth: '90', sortable: true, }, { label: '成交均价', key: '', unit: '元/m²', prop: "tradePrice", minWidth: '100', }, { label: '成交金额', key: '', unit: '万元', prop: "tradeMoney", minWidth: '100', }, ], } } methods: { //sortMethod方法 sortMethod(key, a, b) { let _a = a[key] ?? 0; let _b = b[key] ?? 0; return _a - _b; }, }
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。