<template>
    <el-layout >
        <el-form isSearch>
            <el-form-item label="名字" >
                <el-input v-model="form.input"  type="datetimerange"></el-input>
            </el-form-item>
            <el-form-item label="名字">
                <el-form-content v-model="form.input" ele="input"></el-form-content>
            </el-form-item>
            <el-form-item label="名字">
                <el-date-picker v-model="form.input" type="datetimerange"></el-date-picker>
            </el-form-item>
            <el-form-item label="名字">
                <el-date-picker v-model="form.input" type="datetimerange"></el-date-picker>
            </el-form-item>
            <el-form-item label="名字">
                <el-date-picker v-model="form.input" type="datetimerange"></el-date-picker>
            </el-form-item>

        </el-form>

        <el-button-group direction="right" base>
            <el-button>下载</el-button>
            <el-button type="primary" @click="isShow = !isShow">新建</el-button>
            <el-button>删除</el-button>
        </el-button-group>

        <el-table
                :data="tableData"
                index
                selection
                border
                style="width: 100%">
            <el-table-column
                    prop="date"
                    label="日期">
            </el-table-column>
            <el-table-column
                    prop="name"
                    label="姓名">
            </el-table-column>
            <el-table-column
                    prop="address"
                    label="地址">
            </el-table-column><el-table-column
                prop="address"
                label="地址">
        </el-table-column><el-table-column
                prop="address"
                label="地址">
        </el-table-column><el-table-column
                prop="address"
                label="地址">
        </el-table-column><el-table-column
                prop="address"
                label="地址">
        </el-table-column><el-table-column
                prop="address"
                label="地址">
        </el-table-column><el-table-column
                prop="address"
                label="地址">
        </el-table-column><el-table-column
                prop="address"
                label="地址">
        </el-table-column><el-table-column
                prop="address"
                label="地址">
        </el-table-column><el-table-column
                prop="address"
                show-overflow-tooltip=""
                label="地址">
        </el-table-column>
        </el-table>

        <el-drawer :visible.sync="isShow" title="标题" @confirm="handleConfirm" size="50%">

            <el-form :model="form" column="2" >
                <el-form-item label="名字" >
                    <el-date-picker v-model="form.input"  type="datetimerange"></el-date-picker>
                </el-form-item>
                <el-form-item label="名字">
                    <el-form-content v-model="form.input" type="input"></el-form-content>
                </el-form-item>
                <el-form-item label="名字">
                    <el-date-picker v-model="form.input" type="datetimerange"></el-date-picker>
                </el-form-item>
                <el-form-item label="名字">
                    <el-date-picker v-model="form.input" type="datetimerange"></el-date-picker>
                </el-form-item>
                <el-form-item label="名字">
                    <el-date-picker v-model="form.input" type="datetimerange"></el-date-picker>
                </el-form-item>

            </el-form>

            <template #footer>
                <el-button>取消</el-button>
                <el-button>取消</el-button>
            </template>
        </el-drawer>
        <!--<el-dict-select v-model="form.input" type="a" @change="handleSearch"></el-dict-select>-->
    </el-layout>
</template>

<script>
export default {
    name: "App",
    data() {
        return {
            form: {
                input: '333'
            },
            isShow: false,
            tableData: [
                {
                    date: '2016-05-02',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, {
                    date: '2016-05-04',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1517 弄'
                }, {
                    date: '2016-05-01',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1519 弄'
                },{
                    date: '2016-05-01',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1519 弄'
                },{
                    date: '2016-05-01',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1519 弄'
                },{
                    date: '2016-05-01',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1519 弄'
                },
            ]
        };
    },
    mounted() {
        debugger
    },
    methods: {
        handleSearch() {
            console.log(111, this.form.input);
        },
        handleConfirm() {
            console.log('handleConfirm')
        }
    }
};
</script>
<style>
html, body, #app {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
}
    .el-layout {
        padding: 36px;
        background: linear-gradient(360deg, #EDF1F7 0%, #DFE7F1 100%);
    }
</style>
