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>

 

posted @ 2021-07-29 11:04  wujf  阅读(648)  评论(0)    收藏  举报