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

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

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

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

代码如下:

全选
// 全选触发事件
    selectall() {
      this.$refs.selectionChannel.selectAll(true);
      this.allSect = true
    },

监听分页数据变化

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

修改后的预览效果如下:

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

但是使用该方法会出现如果请求数据返回慢,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渲染延迟出现未选中状态的情况。

你可能感兴趣的:(EasyCVR前端开发配置中心的国标级联通道全选只能当前页面选中的调整)