Vue - ElementUI下拉数据在页面中流转的最佳实践方案探讨

本方案探讨基于vue2，ElementUI技术栈

下拉列表数据在新增页面中的流动轨迹

第一步： 获取下拉列表数据集合

1. 前端自定义字典

• 定义对象类型（key：表示id， value： 表示label）

• 定义数组类型 [{label:'是'， value:1},{label: '否', value: 2}]

2. 从远程获取数据字典

• 获取数组类型： 可以在数组对象中包含更多的数据信息，便于在前端进行定制化展示。

第二步：选择下拉数据

1. 在组件中通过v-model.number 对选择的数据类型进行转换, 保证提交给后端的数据类型正确。
2. 在el-option 的value属性对修改时回填的数据类型进行转换,防止因数据类型问题导致无法正常回填

<el-select
	v-model.number="scope.row[v.field]"
	@change="changeSaleType($event, scope.row, scope.$index)"
	clearable
	filterable
	placeholder="销售类型"
	size="mini"
	>
	<el-option v-for="(label, key) in saleTypeList" :key="label" :label="label" :value="Number(key)" />
</el-select>

第三步： 提交下拉数据及方案探讨

1. 提交单个基本数据类型值

字典定义为对象类型取值更方便

• el-select选择的值，为基本数据类型
• 新增，修改，无需处理数据逻辑
• 列表展示，需要根据返回值，从字典中获取对应的label进行展示。
• 字典定义为对象类型，方便列表展示时进行label获取。

2. 提交多个基本数据类型值

字典通常定义为数组集合，存储更多字段信息

方案1： el-select选择的值为对象类型

• 新增提交：通过对象获取多个需要提交的基本数据，需处理数据。
• 数据回填：需要将返回的基本数据组装成对象类型，需处理数据。
• 修改提交：和提交数据相同，需要从对象获取基本数据，需数据处理。
• 列表数据展示：因为已提交了相关字段信息，无需进行数据处理。

方案2： el-select选择的值为基本数据类型 （推荐）

• 新增提交： 通过选择的数据，从字典集合中查找对应的条目，获取需要提交的数据字段。
• 数据回调： 无需数据处理。
• 修改提交： 同新增提交，需要查找对应的数据条目，提交更多字段。
• 列表数据： 已提交相关字段，无需数据处理。

3. 提交对象类型

• el-select选择的值，最好为对象类型，
• 数据新增，修改和数据回填，以及数据展示无需过多处理。

总结：

1. 最好提交单个数据值（单个基本类型或者对象类型），整个方案最为简洁，处理和关心的逻辑最少。
2. 如果提交多个数据值，采用el-select选择值为基本类型的方案，需要关心的数据处理地方最少。