vxe-table——实现切换页码时排序状态的回显问题(ant-design+elementUi中table排序不同时回显的bug)——js技能提升

之前写的后台管理系统,都是用的antd+elementtable组件中的【排序】问题是有一定的缺陷的。

想要实现的效果:

antv------table组件一次只支持一个参数的排序

如下图:

就算是可以自行将排序字段拼接到列表接口的入参中,页面中字段的排序也是只有一个的。不会同时显示排序的状态。比如像下面的

element------table组件一次只支持一个参数的排序

就连【default-sort】默认的排序参数,都只是一个对象,而非是一个数组。

没有办法实现我们想要的多个参数同时排序并且回显的效果。

前几天写的文章中的vxe-table组件可以实现这样的效果。

vxe-table组件实现多个参数同时排序的效果

感觉官网上有一部分内容还是不太好看的,只有真正用到了,才能明白其中的含义。

js 复制代码
 <vxe-table
          size="small"
          border
          resizable
          ref="xTable1"
          id="toolbar_demo5"
          :custom-config="customConfig"
          show-overflow="tooltip"
          :sort-config="sortConfig"
          :row-config="rowConfig"
          :checkbox-config="checkboxConfig"
          :data="dataSource"
          :loading="loading"
          @checkbox-change="wipCheckboxChange"
          @checkbox-all="wipCheckboxAll"
          @sort-change="wipSortChange"
        >
        ....
       </vxe-table>

关于排序,这里面要用到的参数有:sortConfig sort-change

步骤1:sortConfig参数需要一开始mounted函数中就指定要排序的字段及方向

比如:我这边的要求是:将排序的内容缓存到本地,然后一进到这个页面就要显示上一次排序的效果。本次更改排序后再次缓存,一次循环。

所以在页面一开始mounted时,我就要取缓存的内容,并处理后放置到sortConfig

js 复制代码
mounted(){
	let sort = localStorage.getItem('sort_arr');
    if (sort != undefined) {
      this.sort_arr = JSON.parse(sort);
      this.queryFrom.OrderBy = JSON.parse(sort).toString();
    }
    let sort_obj = JSON.parse(localStorage.getItem('sort_arr'));
    let defaultSort = [];
    if (sort_obj && sort_obj.length > 0) {
      sort_obj.forEach((item) => {
        let arr = item.split(' ');
        defaultSort.push({ field: arr[0], order: arr[1] });
      });
      this.sortConfig.defaultSort = defaultSort;
    }
}

步骤2:监听排序方法sort-change

js 复制代码
 // 排序
wipSortChange({ column, field, order, sortBy, sortList }) {
  console.log(column, field, order, sortBy, sortList);
  if (sortList.length != 0) {
    let arr = sortList.map((v) => {
      return v.field + ' ' + v.order;
    });
    localStorage.setItem('sort_arr', JSON.stringify(arr));
  }
  let sort = localStorage.getItem('sort_arr');
  if (sort != undefined) {
    this.queryFrom.OrderBy = JSON.parse(sort).toString();
  }
  this.card_list_api();//这个是请求列表数据的接口
},

完成!!!

我看之前同事写的的代码:在切换分页的时候用到了this.$refs.xTable1.clearAll(),这个方法直接将排序的结果都清除了。这样是不对的。

页面选中的值,切换页码的时候没有回显的问题

可以在切换页码的时候,通过下面的代码来实现选中的回显:

js 复制代码
if (this.selectedRows) {
  this.selectedRows.forEach((v) => {
    this.$refs.xTable1.setCheckboxRow(v, true);
  });
}
相关推荐
江城开朗的豌豆4 分钟前
Vue路由动态生成秘籍:让你的链接'活'起来!
前端·javascript·vue.js
晓得迷路了4 分钟前
栗子前端技术周刊第 88 期 - Apache ECharts 6.0 beta、Deno 2.4、Astro 5.11...
前端·javascript·echarts
江城开朗的豌豆10 分钟前
在写vue公用组件的时候,怎么提高可配置性
前端·javascript·vue.js
江城开朗的豌豆10 分钟前
Vue路由跳转的N种姿势,总有一种适合你!
前端·javascript·vue.js
江城开朗的豌豆11 分钟前
Vue路由玩法大揭秘:三种路由模式你Pick谁?
前端·javascript·vue.js
江城开朗的豌豆11 分钟前
Vue路由守卫全攻略:给页面访问装上'安检门'
前端·javascript·vue.js
前端 贾公子19 分钟前
monorepo + Turborepo --- 开发应用程序
java·前端·javascript
江城开朗的豌豆24 分钟前
Vue路由传参避坑指南:params和query的那些猫腻
前端·javascript·vue.js
十里青山32 分钟前
超好用的vue图片预览插件更新啦,hevue-img-preview 7.0.0版本正式发布,支持vue2/vue3/移动/pc,增加缩略图、下载、自定义样式等
前端·javascript·vue.js
lichenyang45341 分钟前
css模块化以及rem布局
前端·javascript·css