vue element pickdate combox input 排版

@{
    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