select下拉框不能賦值

• 前言：

需要用到類似於下面的下拉選擇框，按照官方文檔寫，始終實現不了下拉框賦上值的情況。

• 過程：

認認真真的看了好幾遍文檔，但是還沒找到原因，不過還是應該感謝自己加入的vue-admin的微信群，大家有問題可以一致討論，於是今早就看到有大神說道：

於是就看到了element-ui的官網果然更新到了1.3.0，果斷升級，結果還真的實現了效果。下面就是自己實現下拉框的兩種做法：

1）做法一：當數據不太多時，直接寫在頁面上；

<el-form-item label="狀態：">
    <el-select v-model="filters.state" placeholder="請選擇狀態">
         <el-option label="正常" value="1"></el-option>
         <el-option label="禁用" value="-1"></el-option>
    </el-select>
</el-form-item>

export default {
        data() {
            return {
                filters: {
                    state:''
                },
...

 

2）做法二：當下拉框的數據多時，可以將選項寫在js當中；

<el-form-item label="狀態：">
    <el-select v-model="filters.value" clearable placeholder="請選擇狀態">
          <el-option
              v-for="item in filters.options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
          </el-option>
    </el-select>
</el-form-item>

export default {
        data() {
            return {
                filters: {
                    options: [
                        { value: -100,label: '請選擇'},
                        { value:1,label: '正常'},
                        { value: -1,label: '禁用'}
                        ],
                    value:''
                },
...

 

以上兩種方式均可實現如第一幅圖上的下拉選擇框。

• 后言：

有時間多看看關於自己用到的東西論壇區，沒准自己遇到的問題會豁然開朗！