element-ui select选择器使用

之前使用饿了么select组件时，都是直接把v-model的值和options的选项值绑定起来，但是获取当前选项的一些数据时，都是需要当前选项的id来调用接口，获取对应数据。所以这样做还必须给select绑定change事件，选项改变，再通过v-model的值去选项数组中比对获取当前值的id，再去调用接口。如下：

var vm = new Vue({
    el: "#app",
    data: {
        options: [
        {
          id: 0,
          name: "未知",
          color: ""
        },
        {
          id: 1,
          name: "准确",
          color: "right"
        },
        {
          id: 2,
          name: "不准确",
          color: "error"
        }
      ],
      value: "",
    },
    methods: {
        selectChange(){
            this.options.forEach(item=>{
                if(this.value === item.name)
                    this.id = item.id
            })
        }
    }
})

      <el-select
        v-model="value"
          class="entity-name-input"
          placeholder="请选择"
          @change="selectChange"
        >
          <el-option
            v-for="item in options"
            :key="item.id"
            :value="item.name"
          >
            <i class="icon-status" :class="item.color"></i>
            <span>{{ item.name }}</span>
          </el-option>
        </el-select>

显然这样做是多此一举了，因为还有一个更方便的方法。可以通过给select组件的label绑定name值，然后给组件的value绑定id值，这样select组件就可以自动展示选取的值，又可以通过v-model直接获取当前值的id。当要展示某个默认选项值时，只要给v-model设置一个固定的id值，就可以直接展示这个id值对应的name值了（注意：v-model的值类型需要与options选项id的值类型保持一致才可以）。

如下：

        <el-select
          v-model="value"
          class="entity-name-input"
          placeholder="请选择"
        >
          <el-option
            v-for="item in options"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          >
            <i class="icon-status" :class="item.color"></i>
            <span>{{ item.name }}</span>
          </el-option>
        </el-select>

效果：

这样就可以直接通过value获取到选项id值了，不需要再绑定change事件。哎，以前多走弯路了，在此记录下。