master

分支 (2)

管理

管理

master

develop

element-ui-component-extension
/
search.html

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Element UI 扩展</title>
    <link href="./wwwroot/elementui/index.min.css" rel="stylesheet" />
    <style scoped>
    </style>
</head>
<body>
    <div id="main" v-cloak>
        <el-main>
            <el-extend-search :load-data="handleLoadData" :add="handleAdd" :filter-json="filterJson"
            :show-search="true"
            :show-add="true"
            :show-refresh="true"
            ></el-extend-search>
        </el-main>
    </div>

    <script type="text/javascript" src="./wwwroot/vue/vue.js?v=2.0"></script>
    <script type="text/javascript" src="./wwwroot/vue/vue-i18n.min.js?v=2.0"></script>
    <script type="text/javascript" src="./wwwroot/elementui/index.min.js"></script>
    <script type="text/javascript" src="./wwwroot/vue/axios.min.min.js"></script>
    <script>
        var $taskVue = new Vue({
            el: "#main",
            data() {
                return {
                    filterJson: [
                        {
                            "type": "input",
                            "label": "大大姓名",
                            "prop": "name",
                            "default": ""
                        },
                        {
                            "type": "select",
                            "label": "性别",
                            "prop": "gender",
                            "default": null,
                            "options": [
                                { "label": "男", "value": "male" },
                                { "label": "女", "value": "female" }
                            ]
                        },
                        {
                            "type": "switch",
                            "label": "是否同意",
                            "prop": "isAgree",
                            "default": false
                        },
                        {
                            "type": "datetimepicker",
                            "label": "预约时间",
                            "prop": "appointmentTime",
                            "default": null,
                            "placeholder": "请选择预约时间",
                            "format": "yyyy-MM-dd HH:mm:ss",
                            "valueFormat": "yyyy-MM-dd HH:mm:ss",
                            "dateTimePickerType": "datetime"
                        },

                        {
                            "type": "radio",
                            "label": "爱好",
                            "prop": "hobby",
                            "default": undefined,
                            "options": [
                                { "label": "足球", "value": "soccer" },
                                { "label": "篮球", "value": "basketball" }
                            ]
                        },
                        {
                            "type": "checkbox",
                            "label": "技能",
                            "prop": "skills",
                            "default": [],
                            "options": [
                                { "label": "编程", "value": "coding" },
                                { "label": "设计", "value": "design" },
                                { "label": "测试", "value": "test" },
                                { "label": "部署", "value": "uat" },
                            ]
                        }
                    ],
                }
            },
            created() {
            },
            methods: {
                handleAdd() { },
                handleLoadData(data) {
                    console.log(data)
                }
            },
            filters: {

            }
        });
    </script>
</body>
</html>