网站设计目标怎么写,牌子网排行榜,无锡建设局官方网站,wordpress抱歉您不能上传文件大家好#xff0c;在使用elementUI表格时#xff0c;有时会出现一些意料之外的问题#xff0c;比如数据排序正常但表格显示、排序错乱等。在网上搜索后一般有2种解决方法#xff1a;1.给表格每一项的el-table-column添加唯一的id用于区分。2.给表格每一项的el-table-column… 大家好在使用elementUI表格时有时会出现一些意料之外的问题比如数据排序正常但表格显示、排序错乱等。在网上搜索后一般有2种解决方法1.给表格每一项的el-table-column添加唯一的id用于区分。2.给表格每一项的el-table-column添加唯一的key用于区分。el-table-columnpropidlabel序号min-width50:key10001/el-table-column
el-table-column propname label名称 min-width80 :key10002template slot-scopescopediv{{ scope.row.name || — }}/div/template
/el-table-column
el-table-column propnumber label数量 min-width80 :key10003template slot-scopescopediv{{ scope.row.number || 0 }}/div/template
/el-table-columnel-table-column proppercentage label百分比 min-width80 :key10002 idpercentage :sort-method(a,b){return a.percentage - b.percentage} sortabletemplate slot-scope{} slotheaderspan百分比/spanel-popoverpopper-classmy-el-popoverplacementright-starttitlewidth200triggerhovercontent这里是百分比spanclasstip-div slotreferencei classel-icon-question tip-icon/i/span/el-popover/templatetemplate slot-scopescopediv classnowColor{{ scope.row.percentage }}%/div/template/el-table-column
以上2种方法大多数时候可以奏效一旦列表使用了复杂数据的排序以上2种方法便会失效比如百分比排序。查询elementUI官方文档发现列表排序会使用elementUI默认的排序可能与开发者想要的效果不一致。 解决方法是使用自定义的排序方法sort-method 关键代码如下 使用自定义排序方法 :sort-method“(a,b){return a.percentage - b.percentage}” sortable
el-table-column proppercentage label百分比 min-width80 :key10002 idpercentage :sort-method(a,b){return a.percentage - b.percentage} sortable/el-table-column
测试数据如下可复制查看效果
this.tableData [{id: 1,name: 测试1号,number: 19,percentage: 52.01,rank: 49,rankRate: 81.29
}, {id: 2,name: 测试2号,number: 11,percentage: 42.01,rank: 11,rankRate: 42.01
}, {id: 3,name: 测试3号,number: 1,percentage: 2.01,rank: 1,rankRate: 2.01
}]效果图如下 最后原创不易如本文对您有所帮助麻烦一键三连点个赞谢谢
