el-select 和 el-checkbox

el-select:

• v-model的值为当前被选中的el-option的 value 属性值
• label 值为选择器展示的 选项值
• 如果想要设置默认选中， 直接设置 v-model 的初始值。

遇到的一个小问题：

描述： 请求返回的值 select 是 0 ，但是将 select-value 的设置为 select 时，select 选项框显示的是0，而不是期望的 “选择1”

原因： el-option 中的 value 值 0， 1 都是 string 类型的，而返回的0却是 number 类型的，因此会出现错误。

解决方法：select-value = String（select），强制类型转换。

<el-select v-model="select-value" placeholder="请选择影响类型" style="float: left;">
    <el-option label="选择1" value="0"></el-option>
    <el-option label="选择2" value="1"></el-option>
</el-select>

<script>
  export default {
    data() {
      return {
        select-value: ''  // 选取默认值在里面就可以了，比如：  select-value:"0"；
      }
    }
  }
</script>

 

el-checkbox：

在el-checkbox元素中定义v-model绑定变量，单一的checkbox中，默认绑定变量的值会是Boolean，选中为true。

<template>
  <!-- `checked` 为 true 或 false -->
  <el-checkbox v-model="checked">备选项</el-checkbox>
</template>
<script>
  export default {
    data() {
      return {
        checked: true
      };
    }
  };
</script>

el-checkbox-group：

• checkbox-group元素能把多个 checkbox 管理为一组，只需要在 Group 中使用v-model绑定Array类型的变量即可。 
• el-checkbox 的 label属性是该 checkbox 对应的值，若该标签中无内容，则该属性也充当 checkbox 按钮后的介绍。
• label与数组中的元素值相对应，如果存在指定的值则为选中状态，否则为不选中。
• 默认选中： this.lines = [2, 3]

<el-checkbox-group v-model="lines">
    <el-checkbox
       v-for="item in linesOption"
       :key="item.id"
       :label="item.id"
       name="lines"
       style="float: left;"
     >
     {{item.lineName}}
     </el-checkbox>
</el-checkbox-group>

export default {
    data () {
        return {
            options5: [{
                value: 'HTML',
                label: 'HTML'
            }, {
                value: 'CSS',
                label: 'CSS'
            }, {
                value: 'JavaScript',
                label: 'JavaScript'
            }],
            lines: []
        }
    }
}