在Vue3+ElementPlus前端中，使用watch监控对象变化，实现字典列表的级联更新处理

在Vue3+ElementPlus前端中，有时候一些字典的关联显示，需要使用级联，因此一般使用watch监控对象变化，实现字典列表的级联更新。本篇随笔介绍基于实际案例来实现多级关联的处理操作，以供参考。
1、省市区的级联案例

在很多实际业务项目中，往往都可能涉及到级联显示的场景。比如有 省份 -> 城市 -> 区县 的字典数据，用户在选择“省份”时，自动更新“城市”选项；选择“城市”时，自动更新“区县”选项。基本的处理过程如下所示。

• 使用 ref/reactive 保存选择值和字典数据。
  
• 使用 watch 监听上级字段变化，动态更新下级字典数据。
  
• 下级值要 清空/重置，避免残留无效值。
  

对于省市区简单例子的Vue3模板界面，如下代码所示。

1. <template>
2.   
3.     <label>省份：</label>
4.     <select v-model="province">
5.       <option :value="null">请选择</option>
6.       <option v-for="p in provinces" :key="p.code" :value="p.code">{{ p.name }}</option>
7.     </select>
9.     <label>城市：</label>
10.     <select v-model="city">
11.       <option :value="null">请选择</option>
12.       <option v-for="c in cities" :key="c.code" :value="c.code">{{ c.name }}</option>
13.     </select>
15.     <label>区县：</label>
16.     <select v-model="area">
17.       <option :value="null">请选择</option>
18.       <option v-for="a in areas" :key="a.code" :value="a.code">{{ a.name }}</option>
19.     </select>
20.   
21. </template>

复制代码

在其script脚本代码的操作中，使用watch来处理界面代码逻辑如下所示。

1. [/code]有时候，对于字段的处理顺序，我们可能需要引入nextick来处理。
2. nextTick 在 Vue3 里非常适合用来 [b]等 DOM 和响应式更新完成再执行逻辑[/b]。
3. 在「编辑场景级联字典」这种情况里，nextTick 可以解决 [b]字典更新和已有值赋值的时序问题[/b]。
4. [code]// 监听省份变化 → 更新城市字典
5. watch(
6.   () => form.province,
7.   async (newVal) => {
8.     if (!newVal) {
9.       cities.value = []
10.       form.city = null
11.       form.area = null
12.       return
13.     }
15.     cities.value = await fetchCities(newVal)
17.     // ⚡ 用 nextTick 等 cities 更新后再校验
18.     await nextTick()
19.     if (!cities.value.find(c => c.code === form.city)) {
20.       form.city = null
21.       form.area = null
22.     }
23.   },
24.   { immediate: true }
25. )

复制代码

 
2、电力记录业务的处理案例

在我们的一个项目案例中，对于电力的一些级联处理，也有类似的参考价值，如对于电力记录的处理中，我们需要根据地区进行一级、二级、三级能耗的下拉列表级联更新，方便在录入的时候进行关联显示。下面是数据列表的显示部分界面截图。

 在数据编辑或者新增的情况下，我们需要根据这些内容进行级联的显示处理，那么界面如下所示。
 

我们看到，以上几个了下拉列表的字典内容，都存在一定的级联关系，如选择区域后，需要更新一级列表、选择一级列表后，需要更新二级列表、选择二级列表后，需要更新三级列表等等。
我们使用watch来跟踪对象的变化，并及时进行字典数据的更新，如下逻辑代码所示。

1. const area = ref([]); // 能源区域
2. const level1 = ref([]); // 一级能耗计量
3. const level2 = ref([]); // 二级能耗计量
4. const level3 = ref([]); // 三级能耗计量
5. const <strong>initArea</strong> = () => {
6.   electrecord.GetFieldDict('area').then(data => {
7.     // console.log(data);
8.     area.value = data;
9.   });
10. };
12. // 判断下拉框的值是否有改变
13. watch(
14.   () => editForm.area,
15.   (newValue) => {
16.     if (!newValue) {
17.       editForm.level1 = '';
18.       editForm.level2 = '';
19.       editForm.level3 = '';
20.     }
21.     if (newValue) {
22.       const whereStr = `area='${newValue}'`;
23.       electmerter.GetFieldDict('level1', whereStr).then(data => {
24.         // console.log(data);
25.         level1.value = data;
26.       });
27.     }
28.   },
29.   { immediate: true }
30. );
32. watch(
33.   () => editForm.level1,
34.   (newValue) => {
35.     if (!newValue) {
36.       editForm.level2 = '';
37.       editForm.level3 = '';
38.       editForm.devicename = '';
39.       editForm.devicecode = '';
40.       editForm.lastnumber = 0;
41.     }
42.     if (newValue) {
43.       const whereStr = `level1='${newValue}' and area='${editForm.area}'`;
44.       <strong>electmerter.GetFieldDict</strong>('level2', whereStr).then(data => {
45.         // console.log(data);
46.         level2.value = data;
47.       });
48.     }
49.   },
50.   { immediate: true }
51. );
52. watch(
53.   () => editForm.level2,
54.   (newValue) => {
55.     if (!newValue) {
56.       editForm.level3 = '';
57.       editForm.devicename = '';
58.       editForm.devicecode = '';
59.       editForm.lastnumber = 0;
60.     }
61.     if (newValue) {
62.       const whereStr = `level2='${newValue}' and area='${editForm.area}' and level1='${editForm.level1}'`;
63.       electmerter.GetFieldDict('level3', whereStr).then(data => {
64.         // console.log(data);
65.         level3.value = data;
66.       });
67.     }
68.   },
69.   { immediate: true }
70. );
71. watch(
72.   () => editForm.level3,
73.   (newValue) => {
74.     if (!newValue) {
75.       editForm.devicename = '';
76.       editForm.devicecode = '';
77.       editForm.lastnumber = 0;
78.     }
79.   },
80.   { immediate: true }
81. );

复制代码

其中 electmerter.GetFieldDict 是ES6类中的API调用函数，主要对标后端代码里面，通用处理的获取对应表的关联字段列表。
后端通用的处理代码如下C#代码所示。

1.         /// <summary>
2.         /// 根据字段名称，获取对应的字典列表
3.         /// </summary>
4.         /// <param name="fieldName">字段名称</param>
5.         /// <param name="whereStr">条件字符串，如Age > 20 AND IsActive = true</param>
6.         /// <returns></returns>
7.         public virtual async Task<List<CListItem>> GetFieldDict(string fieldName, string whereStr)
8.         {
9.             var list = new List<CListItem>();
10.             if (!fieldName.IsNullOrEmpty())
11.             {
12.                 //var sql = $"Select distinct {fieldName} from Table";
13.                 var query = this.EntityDb.AsQueryable();
14.                 if (!string.IsNullOrWhiteSpace(whereStr))
15.                 {
16.                     query = query.Where(whereStr);
17.                 }
19.                 var fieldList = await query.Distinct().Select<string>(fieldName).ToListAsync();
20.                 if(fieldList != null && fieldList.Count >0)
21.                 {
22.                     var sortedList = fieldList
23.                         .OrderBy(name => GetSortIndex(name))  // 主排序：数字前缀
24.                         .ThenBy(name => name)                // 次排序：中文拼音顺序
25.                         .ToList();
26.                     list = sortedList.Select(s => new CListItem(s)).ToList();
27.                 }
28.             }
29.             return list;
30.         }

复制代码

以上就是一些简单案例上对于watch的使用，用于处理多级关联更新的情况下的功能实现。

来源：豆瓜网用户自行投稿发布，如果侵权，请联系站长删除