案例说明：vue中Element UI下拉列表el-option中的key、value、label含义各是什么

作者：时间：2022-08-18阅读数：人阅读

可以简单理解为：label 是给用户展示的东西，value是前端往后端传递的真实值

<template>
  <div>
    <el-page-header @back="goBack" content="注册"></el-page-header>
    <el-divider></el-divider>

    <el-row>
      <el-col :span="12" :offset="6">
        <el-form ref="form" :model="userInfo" label-width="80px">
          <el-form-item label="用户名">
            <el-input v-model="userInfo.username"></el-input>
          </el-form-item>
          <el-form-item label="密码">
            <el-input v-model="userInfo.password" type="password"></el-input>
          </el-form-item>
          <el-form-item label="确认密码">
            <el-input
              v-model="userInfo.conformPassword"
              type="password"
            ></el-input>
          </el-form-item>
          <el-form-item label="年龄">
            <el-input-number
              v-model="userInfo.age"
              :min="10"
              :max="100"
            ></el-input-number>
          </el-form-item>
          <el-form-item label="城市">
            <!-- <el-input v-model="userInfo.city"></el-input> -->
            <el-select v-model="userInfo.city" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="性别">
            <el-radio v-model="userInfo.gender" :label="0">保密</el-radio>
            <el-radio v-model="userInfo.gender" :label="1">男</el-radio>
            <el-radio v-model="userInfo.gender" :label="2">女</el-radio>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">注册</el-button>
            <br />
            <router-link to="/login">登录</router-link>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { registerService } from '../../services/user'

export default {
  data() {
    return {
      options: [{
        value: '选项1',
        label: '北京'
      }, {
        value: '选项2',
        label: '上海'
      }, {
        value: '选项3',
        label: '广州'
      }, {
        value: '选项4',
        label: '西安'
      }, {
        value: '选项5',
        label: '天津'
      }],
      userInfo: {
        username: '',
        password: '',
        conformPassword: '',
        age: 20,
        city: '',
        gender: 0
      }
    }
  },
  methods: {
    goBack() {
      this.$router.push('/').catch(err => { err })
    },
    async onSubmit() {
      // 校验信息
      const { username, password, conformPassword } = this.userInfo
      if (!username || !password) {
        this.$message.error('请输入用户名和密码')
        return
      }
      if (password !== conformPassword) {
        this.$message.error('两次密码不一致')
        return
      }
      delete this.userInfo.conformPassword

      // 注册新用户
      await registerService(this.userInfo)
      this.goBack()
    }
  }
}
</script>
<style scoped>
a {
  text-decoration: none;
}
</style>

前端展示：
在这里插入图片描述
而我们注册用户信息之后，选择了第四个选项‘西安’，此时数据库中新增的zhangsan信息中，city显示的是‘选项四’，而不是西安。

这是因为：我们在前端代码中将value值写做‘选项X’，
此时我们将前端代码中options中做修改：

export default {
  data() {
    return {
      options: [{
        value: '北京',
        label: '北京'
      }, {
        value: '上海',
        label: '上海'
      }, {
        value: '广州',
        label: '广州'
      }, {
        value: '西安',
        label: '西安'
      }, {
        value: '天津',
        label: '天津'
      }],
      userInfo: {
        username: '',
        password: '',
        conformPassword: '',
        age: 20,
        city: '',
        gender: 0
      }
    }
  },

重新注册wangwu的信息，并选择第四项‘西安’，此时数据库中新增user信息：wangwu的city为‘西安’
在这里插入图片描述