Select 选择器
<template>
<el-select v-model="value" value-key="id" placeholder="请选择">
<el-option
v-for="item in options"
:key="item.id"
:label="item.label"
:value="item">
</el-option>
</el-select>
</template>
PS:如果 Select 的绑定值为对象类型,请务必指定 value-key 作为它的唯一性标识
Cascader 级联选择器
方法一:
1.配置
如果后端返回的字段和前端的不一致,请使用 props 把 value,label,children 做映射:
props : {value: 'all', label: 'label'}
2.options中遍历组装all
all: {
value: value,
label: label
}
PS:此时,点击cascader选择需要的内容后,取出来的Selected值就是[{value: 选中值的value, label: 选中值的label}]
可以通过配置all获取任意自己想要的值
3.默认值的问题
v-model设置的初始值不能显示在组件上
可以使用了placeholder代替显示
方法二:
给 cascader 组件一个别名ref="组件名",然后用 this.$refs[关联组件名].currentLabels 就能取到选中的 labels