vue+element-ui+vue-ele-table实现带分页编辑修改删除添加表格效果代码
代码语言:html
所属分类:表格
代码描述:vue+element-ui+vue-ele-table实现带分页编辑修改删除添加表格效果代码
代码标签: vue element-ui vue-ele-table 分页 编辑 修改 删除 添加 表格
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/elementui.css"> <style> body { background-color: #f0f2f5; } </style> </head> <body > <div id="app"> <el-card header="ele-table演示" shadow="never" style="max-width: 1250px;margin: 20px auto;" > <ele-table :columns-desc="columnsDesc" :delete-fn="handleDelete" :deletes-fn="handleDeletes" :is-show-index="false" :is-show-right-delete="true" :is-show-top-delete="true" :request-fn="handleRequest" :right-buttons="rightButtons" :top-buttons="topButtons" :top-search="topSearch" :top-time="topTime" :update-fn="handleUpdate" ref="table" ></ele-table> </el-card> </div> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/vue@2.6.1-dev.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/elementui.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/mock.min.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/vue-ele-table.umd.min.js"></script> <script > var Random = Mock.Random; new Vue({ el: '#app', data() { return { mockData: [], rightButtons: [ { text: '编辑', click: (id, index, data) => { console.log(id, index, data); this.$message({ type: 'success', message: '点击编辑了!' }); } }], topButtons: [ { text: '新增', click: data => { console.log(data); this.$message({ type: 'success', message: '点击新增!' }); } }, { text: '启用', attrs: { type: 'success' }, click: ids => { console.log(ids); if (ids.length === 0) return; this.$refs.table.reset(); this.$message({ type: 'success', message: '更新成功!' }); setTimeout(() => { this.mockData = this.mockData.map(item => { if (ids.indexOf(item.id) > -1) { item.status = 1; } return item; }); }, 1000); } }, { text: '禁用', attrs: { type: 'warning' }, click: ids => { console.log(ids); if (ids.length === 0) return; this.$refs.table.reset(); this.$message({ type: 'success', message: '更新成功!' }); setTimeout(() => { this.mockData = this.mockData.map(item => { if (ids.indexOf(item.id) > -1) { item.status = 0; } return item; }); }, 1000); } }], topTime: 'create_time', topSearch: [ { text: '用户名', value: 'name' }, { text: '省份', value: 'address' }], columnsDesc: { id: { text: 'ID', sortable: true, width: 80 }, avatar: { text: '头像', type: 'image' }, name: { text: '名字', type: 'input' }, type: { text: '类型', options: ['VIP1', 'VIP2', 'VIP3', 'SVIP'] }, address: { text: '省份' }, birthday: { toggleShow: true, text: '出生日期' }, st.........完整代码请登录后点击上方下载按钮下载查看
网友评论0