el-select标签存在的数据匹配问题

前端

el-select标签存在的数据匹配问题

写后台弹窗会遇见的问题

一使用方法

userList数据循环在列表，下拉框显示的值为userList里面的label字段的值，实际值为对应label的uuid值，如下面例子中输出选中小王的值应该为01

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


<template>
  <el-select v-model="form">
    <el-option
      v-for="item in userList"
      :key="item.uuid"
      :label="item.username"
      :value="item.uuid"
    />
  </el-select>
</template>

1
2
3
4
5


const userList = ref([{
    username:'小王',
    uuid:'01'
}])
const form = ref<any>()

二传值问题（匹配功能）

当我们在子组件进行表单操作的时候，需要从父组件往子组件传相关操作数据的值，若传入form的值是小王，则form在下拉框中显示的值为小王,实际值也为小王，若传入的值为01,则下拉框中显示的值为小王，实际值依旧为01