Avue中crud组件设置默认选中的行

工作中在使用Avue这款ui框架时,一些使用场景需要在重新请求数据后,将上一次勾选中的表格行默认选上

例如:此时勾选中了 “测试任务1” 那么需要在重新请求数据后,重新请求的数据中若有“测试任务1” ,就需要进行回显,也就是默认将其选中。

Avue中crud组件设置默认选中的行

 大致的思路如下:

1、通过节点拿到crud的 toggleRowSelection函数,通过该函数来设置默认选中

代码如下:

//说明:
  1、ongoingTask是为crud组件设置的ref属性值
  2、listData就是crud渲染的数据    selectList是先前勾选中的数据
  3、我这里对listData做的监听 其实也可以直接在网络请求回调里面对listData赋值的地方进行如下操作


    watch: {
      listData: {

        handler() {

           //方式一:


          let arr = [];
          this.listData.forEach(item => {
             this.selectList.forEach(info => {
               if (info.id == item.id) {
                 arr.push(item)
              }
             })
           })


           this.$nextTick(() => {
             arr.forEach(item => {
               this.$refs.ongoingTask.toggleRowSelection(item, true);
             })
           })



          //方式二(方式二失败 原因见下面说明)

          this.$nextTick(() => {
            this.listData.forEach(item => {

              this.selectList.forEach(info=>{
                if (info.id == item.id) {
                  this.$refs.ongoingTask.toggleRowSelection(item, true);
                }
              })

            })
          })

        },

        deep: true

      }
    }

上面的方式二是我最开始尝试的方法,在这上面有一个坑,挂出来让大家都了解一下,避免踩坑。

我在做的时候发现调用toggleRowSelection这个方法,会默认触发crud的 @selection-change方法,也是就是crud的表格勾选的回调,就会执行我下面这段代码

      selectionChange(select) {
        debugger
        this.selectList = select
      },

如果使用方法二,那么就会存在一个问题,就会出现selectionChange回调函数被选中的为空的情况,即参数select为空的情况。那么此时他就重置了data中的selectList 数据,此时selectList为空数组,所以就会出现被选中数据丢失的情况

而使用方法一,已经把先前被选中的数据进行了筛选了出来,再调用toggleRowSelection方法即使触发了@selection-change方法那么他被选中,即select参数一直都会有数据,不会出现空的情况,所以就不会对data中的selectList 数据重置。

由于Avue是基于element ui再次封装的 上面介绍的方法在element ui中的table组件同样适用。

上一篇:fastadmin常用一键创建curd


下一篇:如何解读 Java IO、NIO 中的同步阻塞与同步非阻塞?