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:''
                },
...

 

以上两种方式均可实现如第一幅图上的下拉选择框。

• 后言：

有时间多看看关于自己用到的东西论坛区，没准自己遇到的问题会豁然开朗！