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>