vxe-table使用碰到的问题

传送门

使用背景：

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.youkuaiyun.com/ljl960426/article/details/121698178?utm_source=app&app_version=5.4.0解决el-table排序时当某列数据有空值导致排序错乱的问题https://blog.youkuaiyun.com/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;
}