vxe-table使用碰到的问题

传送门

使用背景:

vxe-table版本为1.15.1,该版本较老,故导致无法使用新版本的api.

这里只讲我遇到过的问题

1.复选框

新版本:

vxe-table使用碰到的问题_第1张图片

旧版本:

给表格设置复选框

vxe-table-column(title="" field="" width="50" type="selection" header-align="center" align="center" fixed="left")

默认勾选表格所有复选框 

this.$refs.xTable.setAllSelection(true);

 2.单选框

获取选中的单选框所在的数据记录 

新版本: 

vxe-table使用碰到的问题_第2张图片 

旧版本: 

const selectData = this.$refs.xTable1.getRadioRow();

3.排序 

排序简要就是两种:前端排序,后端排序。

前端排序:遇到字符串型数字或数据为空时,排序会错乱(该问题不独属于vxe-table),当指定sort-type值将会解决这一问题

可以参考一下博客:

​​​​​​​解决element 表格升降序排序错乱的问题,并获取排序后的表格数据icon-default.png?t=M4ADhttps://blog.csdn.net/ljl960426/article/details/121698178?utm_source=app&app_version=5.4.0解决el-table排序时当某列数据有空值导致排序错乱的问题icon-default.png?t=M4ADhttps://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;
}

 

 

 

 

你可能感兴趣的:(vue工作,vxe-table,vue.js)