element-UI下拉选择框的value属性说明

element-UI下拉选择框的value属性说明

如下图所示，这是一个多选框的效果图，

<el-select v-model="value1" multiple placeholder="请选择" style="width:100%;">
   <el-option
      v-for="item in options"
      :key="item.code"
      :label="item.chinaName"
      :value="item.code"
      >
    </el-option>
 </el-select>

这里着重的讲一下label和value的区别，label是你看到的东西，value是你所选择的生成的数组，此处options的数据结构是

[
	{
		chinaName: "西班牙"
		code: "ES"
		name: "Spain"
		numCode: 724
	},
	{
		chinaName: "中国"
		code: "ZN"
		name: "China"
		numCode: 725
	}
]

:value="item.code"的意思是我选择框显示的内容是chinaName，当我选择了‘西班牙’之后，选择框会将‘西班牙’对应的code: "ES"推入v-model="value1"绑定的数组value1中，这样在你与后端交互的时候，就会很方便，有的时候避免再一次对数据进行处理，之前用的时候没有很在意这个属性，今天使用的时候突然发现了，记录一下。

下拉选择框的校验：
绿色部分要和红色部分的属性值要一样