vue element pickdate combox input 排版

阳光穿透心脏的1/2处 2022-01-06 02:07 92阅读 0赞

@{
        ViewData["Title"] = "Home Page";
        Layout = null;
    }
    <link rel="stylesheet" href="//unpkg.com/element-ui@2.9.1/lib/theme-chalk/index.css">
    <script src="//unpkg.com/vue/dist/vue.js"></script>
    <script src="//unpkg.com/element-ui@2.9.1/lib/index.js"></script>
    
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    
    <style>
    
        .el-row {
            margin-bottom: 20px;
            &:last-child
    
        {
            margin-bottom: 0;
        }
    
        }
    
        .el-col {
            border-radius: 4px;
        }
    
        .bg-purple-dark {
            background: #99a9bf;
        }
    
        .bg-purple {
            background: #d3dce6;
        }
    
        .bg-purple-light {
            background: #e5e9f2;
        }
    
        .grid-content {
            border-radius: 4px;
            min-height: 36px;
        }
    
        .row-bg {
            padding: 10px 0;
            background-color: #f9fafc;
        }
    </style>
    
    <p>
    
    
        <div id="app">
            <el-row :gutter="20">
                <el-col :span="3">
                    <el-input v-model="input" size="small" type="text" placeholder="请输入内容"></el-input>
                </el-col>
                <el-col :span="3">
                    <el-select v-model="value" size="small" placeholder="请选择">
                        <el-option v-for="item in options"
                                   :key="item.value"
                                   :label="item.label"
                                   :value="item.value">
                        </el-option>
                    </el-select>
                </el-col>
                <el-col :span="3">
                    <el-input v-model="input2" size="small" type="text" placeholder="请输入内容"></el-input>
                </el-col>
                <el-col :span="6">
                    <el-date-picker v-model="value2"
                                    type="daterange"
                                    value-format="yyyy-MM-dd"
                                    size="small"
                                    range-separator="-"
                                    start-placeholder="Applicant Begin"
                                    end-placeholder="Applicant End">
                    </el-date-picker>
                </el-col>
            </el-row>
        </div>
    </p>
    
    <script>
    
        var dd = new Vue({
            el: '#app',
            created(){
                axios.post('@Url.Action("Data")')
                    .then(function (response) {
                        console.log(response);
                        dd.options = response.data;
                    }).catch(function (error) { // 请求失败处理 console.log(error);
                    });
            },
            data: {
                value2: '',
                input1: '',
                input2: '',
                input: '',
                options: [],
                value: ''
            },
            
        })
    
    
    
    </script>

public JsonResult Data()
            {
                var d = new[]
                {
                     new { label = 1, value = 2 },
                     new { label = 3, value = 4 },
                };
                return Json(d);
            }

转载于:https://www.cnblogs.com/LiuFengH/p/11064717.html