当前位置：首页 > news >正文

dataV组件使用——数据更新更新组件

news 2025/7/28 8:18:24

bug 当数据更新只更新一个属性页面不会刷新（this.config1.data = arr;）
必须重新赋值整个config

方式一：检测到数据更新重新赋值config

 this.config1 = {data: arr,header: ["所在单位", "人员姓名", "职位", "联系方式", "人员状态"],align: ["center", "center", "center", "center", "center"],columnWidth: [150],rowNum: 7,evenRowBGC: "rgba(33, 78, 133,.5)",oddRowBGC: "transparent",headerBGC: "",waitTime: 1000,headerHeight: "45",};

方式二：同理使用es6语法

this.config1.data = arr;
this.config1={...this.config1}

<template><dv-scroll-board:config="type == 1 ? config1 : type == 2 ? config2 : type == 3 ? config3 : config4"ref="scrollBoard"class="w100 h100"/>
</template>
<script>
export default {props: ["list", "type"],watch: {list: {handler(val) {// console.log("watch监听", val, this.type, 777777);if (val) {if (this.type == 1) {let arr = val.map((el) => {return [el.deptName,el.personName,el.postName,el.phoneNumber,`<span class="${el.memberTypeName == "在岗"? "green1": el.memberTypeName == "培训" || el.memberTypeName == "出差"? "red1": el.memberTypeName == "休假" || el.memberTypeName == "轮休"? "yellow1": "blue1"}">${el.memberTypeName}</span>`,];});// ☆☆☆☆☆ bug 当数据更新只更新一个属性页面不会刷新（this.config1.data = arr;）// 必须重新赋值整个config/*** 方式一 ：* this.config1.data = arr;* this.config1={...this.config1}*//*** 方式二 ： 如下重新写一遍*//*** 方式三： 直接在html中绑定对象就会监听到*/this.config1 = {data: arr,header: ["所在单位", "人员姓名", "职位", "联系方式", "人员状态"],align: ["center", "center", "center", "center", "center"],columnWidth: [150],rowNum: 7,evenRowBGC: "rgba(33, 78, 133,.5)",oddRowBGC: "transparent",headerBGC: "",waitTime: 1000,headerHeight: "45",};// console.log("config1", arr, this.config1);// this.$refs["scrollBoard"].updateRows(arr, 0);} else if (this.type == 2) {let arr = val.map((el) => {return [el.deptName,el.carName,el.carTypeName,el.carNumber,`<span class="${el.carStatusName == "正常"? "green1": el.carStatusName == "维修"? "red1": "blue1"}">${el.carStatusName}</span>`,];});// this.config2.data = arr;this.config2 = {data: arr,header: ["所在单位","车辆名称","车辆属性","车牌号","车辆状态",],align: ["center", "center", "center", "center", "center"],columnWidth: [150],rowNum: 7,evenRowBGC: "rgba(33, 78, 133,.5)",oddRowBGC: "transparent",headerBGC: "",waitTime: 1000,headerHeight: "45",};// console.log("config2", arr, this.config2);// this.$refs["scrollBoard"].updateRows(arr, 0);} else if (this.type == 3) {let arr = val.map((el) => {return [el.dutyTypeName,el.userName,el.workPhoneNumber,el.mobilePhoneNumber,el.virtualNumber,];});// this.config2.data = arr;this.config3 = {data: arr,header: ["值班类型", "姓名", "工作电话", "联系电话", "虚拟号"],align: ["center", "center", "center", "center", "center"],columnWidth: [100, , , ,],rowNum: 4,evenRowBGC: "rgba(33, 78, 133,.5)",oddRowBGC: "transparent",headerBGC: "",waitTime: 1000,headerHeight: "35",};// console.log("config3", arr, this.config3);// this.$refs["scrollBoard"].updateRows(arr, 0);} else if (this.type == 4) {let arr = val.map((el) => {return [el.dutyDeptName, el.userName, el.mobilePhoneNumber];});// this.config2.data = arr;this.config4 = {data: arr,header: ["值班类型", "值班人员", "联系电话"],align: ["center", "center", "center"],columnWidth: [150, 150, ,],rowNum: 7,evenRowBGC: "rgba(33, 78, 133,.5)",oddRowBGC: "transparent",headerBGC: "",waitTime: 3000,headerHeight: "45",};// console.log("config3", arr, this.config3);// this.$refs["scrollBoard"].updateRows(arr, 0);}}},// 这里是关键，代表递归监听的变化deep: true,// immediate: true,},},data() {return {config1: {header: ["所在单位", "人员姓名", "职位", "联系方式", "人员状态"],data: [],align: ["center", "center", "center", "center", "center"],columnWidth: [150],rowNum: 7,evenRowBGC: "rgba(33, 78, 133,.5)",oddRowBGC: "transparent",headerBGC: "",waitTime: 1000,headerHeight: "45",},config2: {header: ["所在单位", "车辆名称", "车辆属性", "车牌号", "车辆状态"],data: [],align: ["center", "center", "center", "center", "center"],columnWidth: [150],rowNum: 7,evenRowBGC: "rgba(33, 78, 133,.5)",oddRowBGC: "transparent",headerBGC: "",waitTime: 1000,headerHeight: "45",},config3: {header: ["值班类型", "姓名", "工作电话", "联系电话", "虚拟号"],data: [],align: ["center", "center", "center", "center", "center"],// columnWidth: [150],rowNum: 4,evenRowBGC: "rgba(33, 78, 133,.5)",oddRowBGC: "transparent",headerBGC: "",waitTime: 1000,headerHeight: "35",},config4: {header: ["值班类型", "值班人员", "联系电话"],data: [],align: ["center", "center", "center"],// columnWidth: [150],rowNum: 7,evenRowBGC: "rgba(33, 78, 133,.5)",oddRowBGC: "transparent",headerBGC: "",waitTime: 1000,headerHeight: "35",},};},mounted() {},// 销毁定时器beforeDestroy() {},methods: {},
};
</script>
<style lang="scss" scoped>
@import "../components/css/rem.scss";::v-deep.dv-scroll-board .header .header-item {// color: #f39800;// color: cyan;color: #6fddc2;font-weight: 700;
}::v-deep.dv-scroll-board.solo .rows {border: 1px solid rgba(0, 238, 255, 0.123);
}::v-deep.dv-scroll-board .green1,
::v-deep.dv-scroll-board .red1,
::v-deep.dv-scroll-board .yellow1,
::v-deep.dv-scroll-board .blue1 {padding: 4px 10px;border-radius: 4px;font-size: 12px;
}::v-deep.dv-scroll-board .green1 {border: 1px solid cyan;background: rgba(0, 255, 255, 0.2);
}::v-deep.dv-scroll-board .red1 {border: 1px solid rgb(250, 13, 84);background: rgba(250, 13, 84, 0.2);
}::v-deep.dv-scroll-board .blue1 {border: 1px solid rgb(0, 89, 255);background: rgba(0, 89, 255, 0.2);
}::v-deep.dv-scroll-board .yellow1 {border: 1px solid rgb(250, 213, 2);background: rgba(250, 213, 2, 0.2);
}
</style>

方法三：直接在html中绑定对象,数据变化会自动更新页面

 <dv-water-level-pond style="width: 0.65rem; height: 0.65rem":config="{data: [res.currentLevel],waveNum: 1,waveHeight: 10,waveOpacity: 0.5,shape: 'round',colors: ['#fff', '#ff3300']}" 
/>