使用背景:
vxe-table版本为1.15.1,该版本较老,故导致无法使用新版本的api.
这里只讲我遇到过的问题
1.复选框
新版本:
旧版本:
给表格设置复选框
vxe-table-column(title="" field="" width="50" type="selection" header-align="center" align="center" fixed="left")
默认勾选表格所有复选框
this.$refs.xTable.setAllSelection(true);
2.单选框
获取选中的单选框所在的数据记录
新版本:
旧版本:
const selectData = this.$refs.xTable1.getRadioRow();
3.排序
排序简要就是两种:前端排序,后端排序。
前端排序:遇到字符串型数字或数据为空时,排序会错乱(该问题不独属于vxe-table),当指定sort-type值将会解决这一问题
可以参考一下博客:
解决element 表格升降序排序错乱的问题,并获取排序后的表格数据https://blog.csdn.net/ljl960426/article/details/121698178?utm_source=app&app_version=5.4.0解决el-table排序时当某列数据有空值导致排序错乱的问题https://blog.csdn.net/a576837179/article/details/111602033?utm_source=app&app_version=5.4.0后端排序:前端需在表格上添加remote-sort关键字,否则前端会将后端排序好的数据又进行前端排序。。。
4.行高亮
定义一个class用于修改内部样式,使用row-class-name属性
vxe-table(:data="list" ref="xTable" class="mytable" :row-class-name="rowClassName")
rowClassName({row}) {
if (row.status === 0) return 'row-red';
return "";
}
要是不起作用,无非是没改到内部样式
.mytable .vxe-body--row.row-red {
background-color:#FF333324 !important;
}