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

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

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

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

复制代码

方式二：同理使用es6语法

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

复制代码

1. <template>
2.   <dv-scroll-board
3.     :config="
4.       type == 1 ? config1 : type == 2 ? config2 : type == 3 ? config3 : config4
5.     "
6.     ref="scrollBoard"
7.     class="w100 h100"
8.   />
9. </template>
10. <script>
11. export default {
12.   props: ["list", "type"],
13.   watch: {
14.     list: {
15.       handler(val) {
16.         // console.log("watch监听", val, this.type, 777777);
17.         if (val) {
18.           if (this.type == 1) {
19.             let arr = val.map((el) => {
20.               return [
21.                 el.deptName,
22.                 el.personName,
23.                 el.postName,
24.                 el.phoneNumber,
25.                 `<span class="${
26.                   el.memberTypeName == "在岗"
27.                     ? "green1"
28.                     : el.memberTypeName == "培训" || el.memberTypeName == "出差"
29.                     ? "red1"
30.                     : el.memberTypeName == "休假" || el.memberTypeName == "轮休"
31.                     ? "yellow1"
32.                     : "blue1"
33.                 }">${el.memberTypeName}</span>`,
34.               ];
35.             });
36.             // ☆☆☆☆☆ bug 当数据更新只更新一个属性页面不会刷新（this.config1.data = arr;）
37.             // 必须重新赋值整个config
38.             /**
39.              * 方式一 ：
40.              * this.config1.data = arr;
41.              * this.config1={...this.config1}
42.              */
43.             /**
44.              * 方式二 ： 如下重新写一遍
45.              */
46.             /**
47.              * 方式三： 直接在html中绑定对象就会监听到
48.              */
49.             this.config1 = {
50.               data: arr,
51.               header: ["所在单位", "人员姓名", "职位", "联系方式", "人员状态"],
52.               align: ["center", "center", "center", "center", "center"],
53.               columnWidth: [150],
54.               rowNum: 7,
55.               evenRowBGC: "rgba(33, 78, 133,.5)",
56.               oddRowBGC: "transparent",
57.               headerBGC: "",
58.               waitTime: 1000,
59.               headerHeight: "45",
60.             };
61.             // console.log("config1", arr, this.config1);
62.             // this.$refs["scrollBoard"].updateRows(arr, 0);
63.           } else if (this.type == 2) {
64.             let arr = val.map((el) => {
65.               return [
66.                 el.deptName,
67.                 el.carName,
68.                 el.carTypeName,
69.                 el.carNumber,
70.                 `<span class="${
71.                   el.carStatusName == "正常"
72.                     ? "green1"
73.                     : el.carStatusName == "维修"
74.                     ? "red1"
75.                     : "blue1"
76.                 }">${el.carStatusName}</span>`,
77.               ];
78.             });
79.             // this.config2.data = arr;
80.             this.config2 = {
81.               data: arr,
82.               header: [
83.                 "所在单位",
84.                 "车辆名称",
85.                 "车辆属性",
86.                 "车牌号",
87.                 "车辆状态",
88.               ],
89.               align: ["center", "center", "center", "center", "center"],
90.               columnWidth: [150],
91.               rowNum: 7,
92.               evenRowBGC: "rgba(33, 78, 133,.5)",
93.               oddRowBGC: "transparent",
94.               headerBGC: "",
95.               waitTime: 1000,
96.               headerHeight: "45",
97.             };
98.             // console.log("config2", arr, this.config2);
99.             // this.$refs["scrollBoard"].updateRows(arr, 0);
100.           } else if (this.type == 3) {
101.             let arr = val.map((el) => {
102.               return [
103.                 el.dutyTypeName,
104.                 el.userName,
105.                 el.workPhoneNumber,
106.                 el.mobilePhoneNumber,
107.                 el.virtualNumber,
108.               ];
109.             });
110.             // this.config2.data = arr;
111.             this.config3 = {
112.               data: arr,
113.               header: ["值班类型", "姓名", "工作电话", "联系电话", "虚拟号"],
114.               align: ["center", "center", "center", "center", "center"],
115.               columnWidth: [100, , , ,],
116.               rowNum: 4,
117.               evenRowBGC: "rgba(33, 78, 133,.5)",
118.               oddRowBGC: "transparent",
119.               headerBGC: "",
120.               waitTime: 1000,
121.               headerHeight: "35",
122.             };
123.             // console.log("config3", arr, this.config3);
124.             // this.$refs["scrollBoard"].updateRows(arr, 0);
125.           } else if (this.type == 4) {
126.             let arr = val.map((el) => {
127.               return [el.dutyDeptName, el.userName, el.mobilePhoneNumber];
128.             });
129.             // this.config2.data = arr;
130.             this.config4 = {
131.               data: arr,
132.               header: ["值班类型", "值班人员", "联系电话"],
133.               align: ["center", "center", "center"],
134.               columnWidth: [150, 150, ,],
135.               rowNum: 7,
136.               evenRowBGC: "rgba(33, 78, 133,.5)",
137.               oddRowBGC: "transparent",
138.               headerBGC: "",
139.               waitTime: 3000,
140.               headerHeight: "45",
141.             };
142.             // console.log("config3", arr, this.config3);
143.             // this.$refs["scrollBoard"].updateRows(arr, 0);
144.           }
145.         }
146.       },
147.       // 这里是关键，代表递归监听的变化
148.       deep: true,
149.       // immediate: true,
150.     },
151.   },
152.   data() {
153.     return {
154.       config1: {
155.         header: ["所在单位", "人员姓名", "职位", "联系方式", "人员状态"],
156.         data: [],
157.         align: ["center", "center", "center", "center", "center"],
158.         columnWidth: [150],
159.         rowNum: 7,
160.         evenRowBGC: "rgba(33, 78, 133,.5)",
161.         oddRowBGC: "transparent",
162.         headerBGC: "",
163.         waitTime: 1000,
164.         headerHeight: "45",
165.       },
166.       config2: {
167.         header: ["所在单位", "车辆名称", "车辆属性", "车牌号", "车辆状态"],
168.         data: [],
169.         align: ["center", "center", "center", "center", "center"],
170.         columnWidth: [150],
171.         rowNum: 7,
172.         evenRowBGC: "rgba(33, 78, 133,.5)",
173.         oddRowBGC: "transparent",
174.         headerBGC: "",
175.         waitTime: 1000,
176.         headerHeight: "45",
177.       },
178.       config3: {
179.         header: ["值班类型", "姓名", "工作电话", "联系电话", "虚拟号"],
180.         data: [],
181.         align: ["center", "center", "center", "center", "center"],
182.         // columnWidth: [150],
183.         rowNum: 4,
184.         evenRowBGC: "rgba(33, 78, 133,.5)",
185.         oddRowBGC: "transparent",
186.         headerBGC: "",
187.         waitTime: 1000,
188.         headerHeight: "35",
189.       },
190.       config4: {
191.         header: ["值班类型", "值班人员", "联系电话"],
192.         data: [],
193.         align: ["center", "center", "center"],
194.         // columnWidth: [150],
195.         rowNum: 7,
196.         evenRowBGC: "rgba(33, 78, 133,.5)",
197.         oddRowBGC: "transparent",
198.         headerBGC: "",
199.         waitTime: 1000,
200.         headerHeight: "35",
201.       },
202.     };
203.   },
205.   mounted() {},
206.   // 销毁定时器
207.   beforeDestroy() {},
209.   methods: {},
210. };
211. </script>
212. <style lang="scss" scoped>
213. @import "../components/css/rem.scss";
215. ::v-deep.dv-scroll-board .header .header-item {
216.   // color: #f39800;
217.   // color: cyan;
218.   color: #6fddc2;
219.   font-weight: 700;
220. }
222. ::v-deep.dv-scroll-board.solo .rows {
223.   border: 1px solid rgba(0, 238, 255, 0.123);
224. }
226. ::v-deep.dv-scroll-board .green1,
227. ::v-deep.dv-scroll-board .red1,
228. ::v-deep.dv-scroll-board .yellow1,
229. ::v-deep.dv-scroll-board .blue1 {
230.   padding: 4px 10px;
231.   border-radius: 4px;
232.   font-size: 12px;
233. }
235. ::v-deep.dv-scroll-board .green1 {
236.   border: 1px solid cyan;
237.   background: rgba(0, 255, 255, 0.2);
238. }
240. ::v-deep.dv-scroll-board .red1 {
241.   border: 1px solid rgb(250, 13, 84);
242.   background: rgba(250, 13, 84, 0.2);
243. }
245. ::v-deep.dv-scroll-board .blue1 {
246.   border: 1px solid rgb(0, 89, 255);
247.   background: rgba(0, 89, 255, 0.2);
248. }
250. ::v-deep.dv-scroll-board .yellow1 {
251.   border: 1px solid rgb(250, 213, 2);
252.   background: rgba(250, 213, 2, 0.2);
253. }
254. </style>

复制代码

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

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

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。