EasyCVR前端开发配置中心的国标级联通道全选只能当前页面选中的调整

在做EasyCVR前端界面开发时，我们发现配置中心的国标级联通道全选只能当前页面选中，跨页丢失选中状态，因此针对这个问题我们做了调整。

通过分析前端代码得知，是由于选中状态未保存导致的状态丢失问题，因此修改一下代码。

代码如下：

<button class="Btn csp" @click="selectall">全选</button>
// 全选触发事件
    selectall() {
      this.$refs.selectionChannel.selectAll(true);
      this.allSect = true
    },

监听分页数据变化

watch:{
    'cascadeChannelParams.start'() {
      if(this.allSect){
        setTimeout(() => {
          this.$refs.selectionChannel.selectAll(true);
        }, 600);
      }
      
    }
  }

修改后的预览效果如下：

但是使用该方法会出现如果请求数据返回慢，dome渲染延迟，点击分页就不会展示全选状态，因此我们对代码做了进一步调整，调整如下：

 watch:{
    'cascadeChannelParams.start'() {
      this.$nextTick(() =>{
        this.$refs.selectionChannel.selectAll(true);
        console.log(this.$refs.selectionChannel);
      })
    }
  }

再次测试，发现此时打印回来的值为undefined ，原因暂未可知，但仍要解决该问题。分析后得出结论，可以把点击分页要触发的事件放在请求数据成功之后，代码如下：

getCascadeChannelsList() {
      this.tableLoadingChannel = true;
      this.CascadeListChannel = [];
      cascade
        .getCascadeChannelsList(this.cascadeChannelParams)
        .then(res => {
          res.data.CascadeChannelList.forEach(item => {
            item._checked = item.Selected;
          });
          this.CascadeCountChannel = res.data.CascadeChannelCount;
          this.remoteDataChannel = JSON.stringify(res.data.CascadeChannelCount);
          this.CascadeListChannel = res.data.CascadeChannelList;
          this.tableLoadingChannel = false;
          // 数据添加之后执行改操作
          if(this.allSect){
            setTimeout(() => {
              this.$refs.selectionChannel.selectAll(true);
            }, 0);
          }
        })
        .catch(() => {
          this.tableLoadingChannel = false;
        });
    },

此时则不会出现点击全选后，分页dome渲染延迟出现未选中状态的情况。