zoukankan      html  css  js  c++  java
  • element-ui select

    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>
    View Code
  • 相关阅读:
    var 全局变量 局部变量
    C#的发展历程第五
    优雅的处理Redis访问超时
    《集体智慧编程》读书笔记10
    《集体智慧编程》读书笔记9
    C#码农的大数据之路
    C#码农的大数据之路
    C#码农的大数据之路
    C#码农的大数据之路
    .NET遇上Docker
  • 原文地址:https://www.cnblogs.com/justSmile2/p/11318612.html
Copyright © 2011-2022 走看看