Vue.js:Select--Option >下拉框绑定和取值

2023-11-16

遇到了这个解决了,所以记录一下:

1.

2.https://www.iviewui.com/components/select

 

完成vue.js下拉框选择绑定与取值,实现效果图如下:

 

upload

 

template代码

 

<template>

    <div>
        <Form :model="formItem" ref="formItem" :rules="ruleInline" :label-width="80">

      

            <FormItem label="完成状态 : " prop="sendValue">
                <Select style="width:200px" v-model="formItem.sendValue">
                    <Option v-for="item in formItem.stateList" :value="item.value" :key="item.value" name="sendValue">{{
                        item.label }}
                    </Option>
                </Select>
            </FormItem>
        
        </Form>
    </div>


</template>

 

js代码

 

<script type="text/ecmascript-6">
    export default {
        mounted() {
            this.getData();
        },
        methods: {

            /**
             * 提交数据
             * @param name
             */
            submit(name) {

                this.$refs[name].validate((valid) => {
                    if (valid) {
                        let temp = {};
                        var url = this.ServerIp + this.API.editDemand + "/d_id/" + this.$route.query.d_id;
                        var that = this;
                        var params = {};
                        params.d_create_user = this.formItem.d_create_user;
                        params.d_progress = this.formItem.d_progress,
                            params.d_status = this.formItem.sendValue,
                            params.edit = 1;
                        this.modal_loading = true;
                        console.log(params.de_enclosure);
                        this.$http({
                            method: 'post',
                            url: url,
                            data: params,
                        }).then((res) => {
                            this.modal_loading = false;

                            if (res.data.success) {
                                that.$Message.success('需求编辑成功');
                                this.$refs[name].resetFields();
                                //路由跳转
                                // this.$router.push({path: '/forumCategoryList'});
                            } else {
                                that.$Message.error(res.data.result);
                            }


                        });

                    }


                });


            },


        data() {
            return {
             
                modal_loading: false,
                questionImageIsShow: false,
                formItem: {
                    d_title: "",
                    u_phone: "",

                    stateList: [
                        {
                            value: '0',
                            label: '待分配'
                        },
                        {
                            value: '1',
                            label: '开发中'
                        },
                        {
                            value: '2',
                            label: '已完成'
                        },
                        {
                            value: '3',
                            label: '停用'
                        },
                        {
                            value: '4',
                            label: '已变更'
                        }
                    ]
                
            

        }
    }
</script>

 

上述代码中this.formItem.sendValue获取我们最终选中的值,可以做其他的操作了。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Vue.js:Select--Option >下拉框绑定和取值 的相关文章

  • jQuery 组合框/选择自动完成? [关闭]

    Closed 此问题正在寻求书籍 工具 软件库等的推荐 不满足堆栈溢出指南 help closed questions 目前不接受答案 是否存在用于替换选择 组合框的 jQuery 插件 我尝试了SexyCombo 它与我想要的非常接近 但
  • 自定义选择菜单对话框上的 jquery mobile 关闭按钮

    我正在尝试将 jqm 对话框上的关闭按钮更改为 X 以外的其他按钮 我不能为此使用 CSS 因为我不希望每次都应用它 所以我正在寻找一种使用 jquery 来实现此操作的方法 有问题的对话框是选择菜单 http api jquerymobi
  • 使用 xmlagg 函数的 SQL 多个 SELECT 查询 - 未按所需方式提取数据

    我在Oracle中的数据是这样的 NAME DEP VALUE ID DEP Amy 1 AA1234 Bob 2 BB4321 Clara 1 CC5678 Clara 2 CC7890 John 1 JJ6543 John 2 JJ78
  • 即使具有 SELECT 权限也无法选择表

    我有两个用户 USER1 and USER2 USER1有特权create table and USER2没有这个特权 USER1创建了一个名为EMPLOYEE并授予select该表的特权USER2 使用 USER1 凭据 1 创建表 CR
  • Android ExpandableListView 复选框选择仅单击的复选框

    我有一个简单的问题ExpandableListViews并使用CheckBoxes 我将在下面显示当前的代码 我目前有一个ExpandableListView每个子行中都有一个复选框 These checkboxes可以选择等等 但问题是我
  • 如何考虑权重随机选择一行?

    我有一张看起来像这样的桌子 id primary key content varchar weight int 我想要做的是从该表中随机选择一行 但要考虑到重量 例如 如果我有 3 行 id content weight 1 some co
  • Oracle 和 SQL Server 保留关键字

    我需要 Oracle Database 10g 和 SQL Server 2008 保留关键字的列表 我的应用程序执行 DDL 语句 因此我需要根据保留字验证输入的表名 列名等 我知道我可以复制并粘贴网站上的文字 甲骨文10g http d
  • JPA/JPQL:SELECT 子句中不允许使用 AS 标识符

    我有一个非常复杂的 JPQL 查询 其形式为 SELECT NEW com domain project view StandingsStatLine ro id AS rid cl name AS team te ordinalNbr 1
  • 尝试将 NOT EXIST 转换为 COUNT

    所以我知道如何使用进行查询NOT EXIST 但我似乎找不到等效的使用COUNT反而 结构 player playerID integer playerName string team teamID integer teamName str
  • 如何在IE中使用键盘选择多个选择的非连续选项

    仅使用键盘 如何选择多选元素的非连续选项 在 Firefox 或 Windows 资源管理器上 我只需按 ctrl 箭头即可移动焦点 然后按空格键进行选择 但我没有看到任何方法让它在 IE 上工作 Thanks 今天我一直在寻找这个 事实证
  • mysql 假选择

    我的目的是 从值列表中获取多行 例如 1 2 3 4 5 a b c anything 等 mysql gt select id from accounts where id in 1 2 3 4 5 6 id 1 2 3 5 6 5 ro
  • 如何检查日期范围是否存在

    正如你从标题中可能注意到的 我的问题很难表达 但有一个问题 我有包含一些数据的 MySQL 表 在注册表中 我必须指定预订开始和结束时间 如何查询指定时间是否已登记预订 例如 我不应该能够添加从 13 20 开始到 15 00 结束的新预订
  • SQL - 被 SELECT 困扰 - 请帮忙!

    我试图在 SQL Server 2005 中实现以下目标 SELECT IF EITHER EXISTS usr username pro email FROM table1 AS usr table2 AS pro WHERE usr u
  • with(nolock) 或 (nolock) - 有区别吗?

    一切都基于 with nolock 完全适合这种情况的假设 已经有很多问题在争论是否使用 with nolock 我环顾四周 无法找到使用之间是否存在实际差异with nolock select customer zipcode from
  • 将 HTML 选择元素转换为带有子菜单的树

    我想让一个选择元素有一个树形的子菜单 我希望它是这样的 source colinear com http www colinear com rmenu gif 有没有一个 jQuery 插件可以将 select 元素变成这种东西 这里有树插
  • 如何使用jquery打开选择输入

    所以我可以看到选择元素的选项 但我需要单击它 如果我想使用一个函数怎么办 当发生某些事情时 应该选择此选择元素 这意味着列表已打开并且我可以看到选项 我不希望用户单击选择元素 我想要其他东西来打开它 我尝试过的 select select
  • 每个派生表必须有自己的别名 - 使用多个 SELECT 语句时出错

    我尝试在查询中使用多个 SELECT 语句从数据库获取数据 但出现错误 查询是 SELECT FROM SELECT FROM players WHERE lid 0 WHERE NOT EXISTS SELECT FROM players
  • 确定用winsock(FIONWRITE)可以发送多少字节?

    通过 select 我可以确定是否可以在不阻塞的情况下接收或发送任何字节 通过这个函数 我可以确定可以接收多少字节 function BytesAvailable S TSocket Integer begin if ioctlsocket
  • MySQL Select 查询 - 仅获取值的前 10 个字符

    好的 这就是问题所在 我有一个包含一些列的表 主题 是其中一列 无论 主题 字段包含一个包含 100 个字母的字符串 我都需要从 主题 字段获取前 10 个字母 例如 Table tbl 列 id subject value SQL查询 S
  • 当Where子句中的术语不在数据库中时,如何从MySQL数据库返回0?

    如果 WHERE 子句中的邻域不存在 如何让 mysql 数据库返回 0 因此 在下面的示例中 旧城区不在数据库中 我希望数据库返回 0 个事件而不是空结果 SELECT incidents neighborhoods FROM myTab

随机推荐