• avue入门


    <html>
    
    <head>
        <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>
        <!-- 引入样式 -->
        <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
        <!-- 引入组件库 -->
        <script src="https://unpkg.com/element-ui/lib/index.js"></script>
        <!-- 引入样式 -->
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@smallwei/avue/lib/theme-chalk/index.css">
        <!-- 引入组件库 -->
        <script src="https://cdn.jsdelivr.net/npm/@smallwei/avue/lib/index.js"></script>
    </head>
    
    <body>
        <div id="app">
            <avue-crud :data="data" :option="option" @row-update="rowUpdate"></avue-crud>
            </br>
            <el-tag>当前弹出框表单中的数据{{obj}}</el-tag>
        </div>
    </body>
    <script>
        new Vue({
            el: '#app',
            methods: {
                rowUpdate(form, index, done, loading) {
                    console.log(111);
                }
            },
            data: function () {
                return {
                    obj: {},
                    data: [
                        {
                            name: '张三',
                            sex: '',
                            date: '1994-02-23 00:00:00'
                        }, {
                            name: '李四',
                            sex: '',
                            date: '1994-02-23 00:00:00'
                        }, {
                            name: '王五',
                            sex: '',
                            date: '1994-02-23 00:00:00'
                        }, {
                            name: '赵六',
                            sex: '',
                            date: '1994-02-23 00:00:00'
                        }
                    ],
                    option: {
                        title: '表格的标题',
                        page: false,
                        align: 'center',
                        menuAlign: 'center',
                        delBtn: false,
                        column: [
                            {
                                label: '姓名',
                                prop: 'name'
                            },
                            {
                                label: '性别',
                                prop: 'sex'
                            }, {
                                label: "日期",
                                prop: "date",
                                type: "date",
                                format: "yyyy-MM-dd hh:mm:ss",
                                valueFormat: "yyyy-MM-dd hh:mm:ss",
                            }
                        ]
                    }
                }
            }
        })
    </script>
    
    </html>
    <html>
    
    <head>
        <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>
        <!-- 引入样式 -->
        <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
        <!-- 引入组件库 -->
        <script src="https://unpkg.com/element-ui/lib/index.js"></script>
        <!-- 引入样式 -->
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@smallwei/avue/lib/theme-chalk/index.css">
        <!-- 引入组件库 -->
        <script src="https://cdn.jsdelivr.net/npm/@smallwei/avue/lib/index.js"></script>
    </head>
    
    <body>
        <div id="app">
            <avue-crud :data="data" :option="option" @row-update="rowUpdate"></avue-crud>
            </br>
            <el-tag>当前弹出框表单中的数据{{obj}}</el-tag>
        </div>
    </body>
    <script>
        new Vue({
            el: '#app',
            methods: {
                rowUpdate(form, index, done, loading) {
                    console.log(111);
                }
            },
            data: function () {
                return {
                    obj: {},
                    data: [
                        {
                            name: '张三',
                            sex: '',
                            date: '1994-02-23 00:00:00'
                        }, {
                            name: '李四',
                            sex: '',
                            date: '1994-02-23 00:00:00'
                        }, {
                            name: '王五',
                            sex: '',
                            date: '1994-02-23 00:00:00'
                        }, {
                            name: '赵六',
                            sex: '',
                            date: '1994-02-23 00:00:00'
                        }
                    ],
                    option: {
                        title: '表格的标题',
                        page: false,
                        align: 'center',
                        menuAlign: 'center',
                        delBtn: false,
                        column: [
                            {
                                label: '姓名',
                                prop: 'name'
                            },
                            {
                                label: '性别',
                                prop: 'sex'
                            }, {
                                label: "日期",
                                prop: "date",
                                type: "date",
                                format: "yyyy-MM-dd hh:mm:ss",
                                valueFormat: "yyyy-MM-dd hh:mm:ss",
                            }
                        ]
                    }
                }
            }
        })
    </script>
    
    </html>

    有追求,才有动力!

    向每一个软件工程师致敬!

    by wujf

    mail:921252375@qq.com

  • 相关阅读:
    Android 六种核心安全机制
    Android 网络通信 HTTP
    Android Thread和AsyncTask
    C#(少用的)
    Asp.net动态生成表单
    设计模式--职责链(学习)
    Extjs表单验证小结
    C#框架
    Javascript获取IFrame内容(兼容IE&FF)
    最近在忙淘宝店的事
  • 原文地址:https://www.cnblogs.com/wujf/p/15074134.html
Copyright © 2020-2023  润新知