Vue-Element 使用笔记

前言

说明：在使用Elment组件时，难免会有一些不习惯或者没有仔细看API文档导致出不来自己想要的效果。好比做一道菜比如鱼，element组件的属性是配料，事件方法是烹饪的工具，如果配料不对自然味道出不来，如果工具使用不当，那做的可能不是鱼。
注意：element-UI和antd都是用户十分庞大且具有权威性，其内封装的方法/属性基本能解决大部分需求，遇到问题时，第一选择永远是看官方API文档！本文只是做一些总结，把平时遇到的问题，作一个纠错笔记。

食用

el-select

官方示例给的是一个静态数据，而实际生产环境中，更多是通过接口从字典表取值（方便数据维护），绑定的一般为对象。
所以要特别留意官网的一句话：

如果 Select 的绑定值为对象类型，请务必指定 value-key 作为它的唯一性标识。

效果

方法

• 选中的值：el-option 值value为对象（示例代码中为：item）
• 指定value-key：因为绑定为对象，所以必须在el-select 添加value-key属性，切记这个属性是唯一值。(示例代码中为：name)
• 设置默认选中值：防止用户漏操作传入空值数据，在页面初始化时自动选中index为0的默认值

源码
在select.vue源码中，可以查到value-key默认值为value，字符串类型。如果是对象，那么就会出不来效果或者报错。这里指定为对象的一个唯一值属性即可，比如示例代码里的name就是唯一值

示例代码

<template>
  ...
  <el-select
        v-model="styleItem"
        value-key="name"
        clearable
        placeholder="请选择"
        @change="onChange"
      >
        <el-option
          v-for="item in styles"
          :key="item.name"
          :label="item.name"
          :value="item"
        />
 </el-select>
 ...
</template>
<script>
...
data() {
    return {
      styles: [],
      styleItem: ''
    }
  },
created() {
 this.addStyle = (name, style) => {
   this.styles.push({
     name: name,
     style: style
   })
 }
 ...
 // 绑定数据
 this.addStyle('No style', {})
 this.addStyle('Hide By Height', {
      show: '${Height} > 200'
 })
 // 默认选中值
 this.styleItem = this.styles[0]
 ...
},
methods: {
    onChange(item) {
      // 输出选定值key的对象
      console.log(item)
    },
}    
...
</script>