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

  • 相关阅读:
    Nginx + FastCGI 程序(C/C++)搭建高性能web service的demo
    微服务架构
    异常点/离群点检测算法——LOF
    多边形区域填充算法--递归种子填充算法
    Java 关于容器集合等数据结构详情图解,一目了然
    平衡小车项目解读日志
    &lt;LeetCode OJ&gt; 101. Symmetric Tree
    【JVM】模板解释器--字节码的resolve过程
    hexo博客的相关配置
    【LeetCode】Find Minimum in Rotated Sorted Array 解题报告
  • 原文地址:https://www.cnblogs.com/wujf/p/15074134.html
Copyright © 2011-2022 走看看