zoukankan      html  css  js  c++  java
  • 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

  • 相关阅读:
    webdav srs相关
    How To Configure WebDAV Access with Apache on Ubuntu 14.04
    ubuntu 编译lighttpd
    srs编译及推流测试
    Compile pciutils (lspci, setpci) in Windows x86,在 Windows x86 平台下编译 pciutils (lspci, setpci)
    mingw MSYS2 区别
    Qt之美(三):隐式共享
    Qt之美(二):元对象
    Qt之美(一):d指针/p指针详解
    C++的栈空间和堆空间
  • 原文地址:https://www.cnblogs.com/wujf/p/15074134.html
Copyright © 2011-2022 走看看