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

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

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

 大致的思路如下：

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组件同样适用。

标签：listData,selectList,crud,item,选中,forEach,组件,Avue
来源： https://blog.csdn.net/fsfsdgsdg/article/details/122052257