1. 组合 label

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <!-- import CSS -->

    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">

</head>

<body>

    <div id="app">

        <el-select v-model="options[0].value" placeholder="请选择">

            <!-- <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">

                <template slot-scope></template>

            </el-option> -->

            <el-option v-for="(item,index) in options" :key="index" :label="`${item.label}-${item.value}`" :value="item.value">

                    <!-- <template slot-scope></template> -->

                </el-option>

        </el-select>

    </div>

</body>

<!-- import Vue before Element -->

<script src="https://unpkg.com/vue/dist/vue.js"></script>

<!-- import JavaScript -->

<script src="https://unpkg.com/element-ui/lib/index.js"></script>

<script>

    new Vue({

        el: '#app',

        data: function () {

            return {

                options: [{

                    value: '1556445455525',

                    label: 'afsdsdsiosiodidsu',

                    num:'选项1'

                }, {

                    value: '2556445455525',

                    label: 'bfsdsdsiosiodidsu',

                    num:'选项2'

                }, {

                    value: '3556445455525',

                    label: 'cfsdsdsiosiodidsu',

                    num:'选项3'

                }],

                value: ''

            }

        }

    })

</script>

</html>

element-ui select的更多相关文章

  1. 使用 Element UI Select 组件的 value-key 属性，让绑定值可以为一个对象

    EsunR 2019-11-07 12:14:42  12264  收藏 6 分类专栏: Vue 文章标签: element-ui 版权 当我们使用 Elemet UI 的选择组件进行多选时,Sele ...

  2. element UI select 设定默认值

    要为select设定默认值,有两个步骤 1.数据中,声明一个变量param:该变量的值设为你想设定的select option中value 2.控件的 v-model 绑定 param 即可 < ...

  3. element ui select组件和table做分页完整功能和二级联动效果

    <template> <div class="index_box"> <div class="search_box"> &l ...

  4. Element ui select 同时获取value和label的值

    html <el-form-item label="单位名称" prop="checkInUnitName"> <el-select v-mo ...

  5. Element ui select同时获取value和label的值

    代码如下: <el-form-item v-if="isMD" label="业务员名称"> <el-select v-model=" ...

  6. shit element ui

    shit element ui element ui & select change event demo https://element.eleme.io/#/en-US/component ...

  7. vue+element ui项目总结点（一）select、Cascader级联选择器、encodeURI、decodeURI转码解码、mockjs用法、路由懒加载三种方式

    不多说上代码: <template> <div class="hello"> <h1>{{ msg }}</h1> <p> ...

  8. 关于Element UI中select组件中遇到的问题

    问题一:在使用select组件设置多选功能后,窗口抖动问题? 详细描述:在我使用select做多选的功能时出现了窗口抖动的问题,测试的时候发现,在有些人的电脑上抖动,有些人的电脑上不抖,找了很多文档, ...

  9. vue+element ui中select组件选择失效问题原因与解决方法

    codejing 2020-07-10 09:13:31  652  收藏 分类专栏: Web Vue Element UI 版权 .当表单form赋完值后,如果后续又对form中某一属性值进行操作如 ...

  10. element UI table 过滤 筛选问题

    一.问提描述    使用elementUI table 官方筛选案例,发现筛选不是服务器端筛选,而是浏览器端对每一页进行单独筛选. 如何在服务器端筛选? 二.查询Element UI 官网table组 ...

随机推荐

  1. python MySQLdb连接mysql时报错

    故障现象: >>> import MySQLdb >>> conn = MySQLdb.connect(host=,charset="utf8" ...

  2. JDK8记FullGC时候Metaspace内存不会被垃圾回收

    本文链接:https://blog.csdn.net/a15939557197/article/details/90635460背景前段时间有一个这样的需求:第三方调用接口,30分钟内调用120W次: ...

  3. Callable和Supplier的区别

    A Callable is "A task that returns a result, while a Supplier is "a supplier of results&qu ...

  4. NoSQL的种类

    https://www.zhihu.com/question/30219620

  5. spring-kafka —— 生产者消费者重要配置

    一.生产者配置 # 以逗号分隔的主机:端口对列表,用于建立与Kafka群集的初始连接 spring.kafka.producer.bootstrap-servers=TopKafka1:9092,To ...

  6. VMware Workstation 12许可证

    VMware 12专业版永久许可证密钥: 5A02H-AU243-TZJ49-GTC7K-3C61N VF5XA-FNDDJ-085GZ-4NXZ9-N20E6 UC5MR-8NE16-H81WY-R ...

  7. kubeadm安装集群系列(kubeadm 1.15.1)

    kubeadm已经进入GA阶段,所以尝试使用kubeadm从零开始安装高可用的Kubernetes集群,并记录下过程和所有坑 本文基于kubeadm 1.15.1 目录 kubeadm安装集群系列-1 ...

  8. Exchange2010---反垃圾邮件配置

    Exchange2010---反垃圾邮件配置  Exchange2010---反垃圾邮件配置   本文以Exchange Server 2010作为反垃圾邮件配置实例为例.  其实,在微软发布的Exc ...

  9. 关于MYSQL安装踩的坑

    前提:本人装的版本是mysql-8.0.18-winx64,win10系统,如果你安装的是其他版本的MYSQL,语法会跟下面有些许区别: 一,安装 https://dev.mysql.com/down ...

  10. *【Python】【demo实验27】【练习实例】【定义递归函数】

    原题: 原题解答: #!/usr/bin/python # encoding=utf-8 # -*- coding: UTF-8 -*- # 利用递归函数调用方式,将所输入的5个字符,以相反顺序打印出 ...