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: []
        }
    }
}