el-table 排序

在项目中使用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;},
}

el-table 排序相关推荐

bootstrap table排序php,BootStrap+Table排序分页序号
这次给大家带来BootStrap+Table排序分页序号,BootStrap+Table排序分页序号的注意事项有哪些,下面就是实战案例,一起来看一下. 前言在使用bootstrap table的时候难 ...
JavaScript Table排序
序二(09/05/03) 近来还是那么忙,趁五一更新一下程序吧. 这个版本主要增加和改进了以下东西: 1,对字符串改用localeCompare来比较: 2,一次排序中能使用多个排序对象(用于值相等时 ...
html表格td向下排序,jquery实现的table排序功能示例
本文实例讲述了jquery实现的table排序功能.分享给大家供大家参考,具体如下: Document div { width: 1024px; margin: 0 auto; /*div相对屏幕左右 ...
DWZ (JUI) 教程 table 排序
DWZ (JUI) 教程 table 排序最近有朋友问到dwz 排序的问题,我简单说一下.dwz排序是后台排序,不是前台的js排序,他的流程和搜索,分页是一样的,当你点击排序的按钮时,从新发送请求刷 ...
js 对动态添加的table 排序
///排序函数 var currCell = 0; //列按照第一列的innerHTML排序 var order=0;//首次升序排列,排完之后,再需要正反排序直接交换行即可,效率能提高 funct ...
sortable vue 排序_VUE +element el-table运用sortable 拖拽table排序，实现行排序，列排序...
sortable.js是一款轻量级的拖放排序列表的js插件(虽然体积小,但是功能很强大) 项目需求是要求能对element中的table进行拖拽行排序这里用到了sorttable sortable ...
bootstrap table排序php,bootstraptable排序可以么
BootstrapTable的列排序怎么搞. 先搞一个table,使用ajax将数据查询出来,然后可以在所有列都加上排序.满足自己的需求.(推荐学习:Bootstrap视频教程) data-sorta ...
antd table排序 vue_ant-design-vue中的table取消默认不排序的状态
ant-design-vue中的table组件具有排序的属性,该排序属性有三种状态:升序.降序和不排序.在项目开发中,有时产品经理会要求排序时只能有升序或降序两种状态,而table组件中却没有相应的A ...
el table 固定表头和首行_el-table表头根据内容自适应，解决表头错位和固定列错位（完美解决）...
将代码复制到指令中即可使用.通过指令方式进行调用.(使用方式 ) 通过计算文字的宽度进行表头设置,其他内容无法计算. 5000个单元格以上根据实际情况使用以上根据实际情况使用,因为单元格越多,计算时间 ...
data layui table 排序_浅谈layui中table的sort排序
table模块是layui框架最核心的组成之一,它用于对表格进行一些列功能和动态化数据操作,本文介绍了layui中table的sort排序,解决了在我们使用sort排序时可能遇到的一些问题. 今天来谈 ...

el-table 排序

el-table 排序相关推荐

最新文章

热门文章