dataV组件使用——数据更新更新组件 - ToB企服应用市场:ToB评测及商务社交产业平台

<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>

复制代码