element 选择器同时获取label和value值

3,200 阅读1分钟

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