vue element-ui select下拉选择的使用 设置

START

• o(╥﹏╥)o
• 这几天一直做表单提交，涉及到下拉选择的使用
• 在编辑操作的时候需要根据父组件数据，初始化下拉选择的默认选中
• 但是下拉选择的值 value 初始化好了，但是显示的选项却不是label 而是 value

问题原因

• 核对了代码很久，终于找到问题原因，这里先解释一下原因，后续再上代码，方便不会使用下拉选择的人直接cv使用。
• 双向绑定的 value 必须全等于 option中的 value
• 我当时的情况是，value的值是相等的，value的变量类型却不一样
• 导致 =》显示的选项不是label 而是 value
• 偷偷吐槽一下，数据类型，这种低级问题，下次不要再犯啦。

简单的使用案例

<template>
  <div class="hello">
    <h3>饿了么ui选择器初始化值案例</h3>
    <el-button @click="up">开始赋值</el-button>
    <el-select
      v-model="value"
      placeholder="请选择产品大类"
      style="width: 100%"
      filterable
    >
      <el-option
        v-for="item in options"
        :key="item.pcode"
        :label="item.pname"
        :value="item.pcode"
      />
    </el-select>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  created() {
    // 这里可以用于获取父组件的表单数据
    // this.value = 10; // options中是字符串类型，设置为数字类型时，就会出现我START说的那种问题.
    this.value = "10";
  },
  data() {
    return {
      value: "",
      options:[]
    };
  },
  methods: {
    // 我这里是demo，所以写的是点击事件，直接写个调用获取选项的接口即可，效果是一样的。
    up() {
      this. options= [
        {
          pcode: "10",
          pname: "黄金糕",
        },
        {
          pcode: "100",
          pname: "双皮奶",
        },
        {
          pcode: "1000",
          pname: "蚵仔煎",
        },
        {
          pcode: "10000",
          pname: "龙须面",
        },
        {
          pcode: "100000",
          pname: "北京烤鸭",
        },
      ]
    },
  },
};
</script>

<style scoped>
</style>

总结

• 设置下拉选择默认值

  如果下拉选择的项是已知的，需要初始化下拉选择，并选中已知的值，简单来说就是设置下拉选择默认值

  • 在created中(其他地方也可以，看情况而定) ，设置组件el-select 绑定的变量value的值,即可 ；
  • 再设置下拉选择循环的变量options的值,即可；

• 其实下拉框用法很简单，这只是一个很简单的组件，CV即可

END

就到这里啦，不多逼逼了。