vxe-table使用碰到的问题

最新推荐文章于 2025-09-10 02:07:25 发布

原创最新推荐文章于 2025-09-10 02:07:25 发布 · 5k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vxe-table #vue.js

vue工作专栏收录该内容

26 篇文章

订阅专栏

本文详细介绍了在vxe-table版本1.15.1中遇到的问题及解决方案，包括复选框设置、单选框操作、排序实现以及行高亮的配置。对于复选框，使用旧版API设置全选；单选框获取选中数据；排序方面，注意字符串数字排序和空值处理；行高亮则通过row-class-name实现。文章还提供了相关博客链接以解决排序问题。

传送门

使用背景：

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;
}