zoukankan      html  css  js  c++  java
  • 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:''
                    },
    ...

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

    • 后言:

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

  • 相关阅读:
    工作感悟
    9/10记事
    总结几份工作的感悟
    四次原则
    在UC浏览器上很炫的一个效果
    php跨服务器传递对象
    wdlinux一键安装包
    手机号码4位隐藏
    php中英文字符串转字母转大小写
    MySQL添加用户、删除用户与授权
  • 原文地址:https://www.cnblogs.com/zhengyeye/p/6811660.html
Copyright © 2011-2022 走看看