dv-scroll-board中的updateRows方法的使用

最新推荐文章于 2024-06-21 10:08:46 发布

m0_68937827

最新推荐文章于 2024-06-21 10:08:46 发布

阅读量750

点赞数

文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/m0_68937827/article/details/130223639

版权

该文章展示了如何在Vue中使用dv-scroll-board组件。首先通过ref添加引用，然后定义数据配置及样式。通过watch深度监听数据变化，将一维数组转换为二维数组以适应组件需求。当数据变化时，使用$refs更新组件的行数据；若数据为空，则初始化配置并应用样式。

摘要由CSDN通过智能技术生成

// 先添加ref
<dv-scroll-board :config="config" ref="scrollBoard" style="width:100%;height:100%;"/>

// 定义数据
config: {
	data: []
},
configStyle: {
	rowNum: 8,
	oddRowBGC: '',
	evenRowBGC: 'rgba(2, 217, 253, 0.3)'
}

// 使用watch监听对应数据的变化
  watch: {
    controlObj: {
      handler(val) {
      	// 这里的作用是将数据转换成二维数组的形式
        const data = []
        this.controlObj.exportList.forEach(item => {
          const i = []
          i.push(item.log)
          data.push(i)
        })
        // 这里是主要代码
        if (this.config.data.length > 0) {
           this.$refs['scrollBoard'].updateRows(data);
         } else {
          this.config = {data: data}
          this.config = {...this.config, ...this.configStyle}
         }
      },
      deep: true,
      immediate: true
    }
  }