select下拉框不能赋值

  • 前言:

需要用到类似于下面的下拉选择框,按照官方文档写,始终实现不了下拉框赋上值的情况。

99

  • 过程:

认认真真的看了好几遍文档,但是还没找到原因,不过还是应该感谢自己加入的vue-admin的微信群,大家有问题可以一致讨论,于是今早就看到有大神说道:

98

于是就看到了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:''
                },
...

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

  • 后言:

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

原文地址:https://www.cnblogs.com/zhengyeye/p/6811660.html