内容简介:GitHub:文档:
D2-Crud 是一套基于Vue.js 2.2.0+ 和Element UI 2.0.0+ 的表格组件。 D2-Crud
将 Element
的功能进行了封装,并增加了表格的增删改查、数据校验、表格内编辑等常用的功能。大部分功能可由配置 json
实现,在实现并扩展了 Elememt
表格组件功能的同时,降低了开发难度,减少了代码量,大大简化了开发流程。
GitHub: github.com/d2-projects…
文档: d2-projects.github.io/d2-admin-do…
示例: d2-projects.github.io/d2-admin/#/…
示例部署在 Github Pages 如果您的网络不太好(示例项目中包含大量示例,体积较大),请完整克隆 项目 在本地启动。
作者
发表此文的账号并不是 D2-Crud 原作者账号。
作者掘金地址:@被遗忘的传说。
作者 github sunhaoxiang
欢迎大家关注支持他,也支持我们继续开源 ~
功能简介
- 继承了 Element 中表格所有功能
- 表格新增数据
- 表格修改数据
- 表格删除数据
- 使用 Element 中的组件渲染表格内容和表单编辑内容
- 表单编辑校验
- 表格内直接编辑模式
如何使用
使用npm安装:
npm i element-ui @d2-projects/d2-crud -S 复制代码
使用yarn安装:
yarn add element-ui @d2-projects/d2-crud 复制代码
在 main.js
中写入以下内容:
import Vue from 'vue' import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' import D2Crud from '@d2-projects/d2-crud' Vue.use(ElementUI) Vue.use(D2Crud) new Vue({ el: '#app', render: h => h(App) }) 复制代码
一个简单的表格示例:
<template> <div> <d2-crud ref="d2Crud" :columns="columns" :data="data"/> </div> </template> <script> export default { data () { return { columns: [ { title: '日期', key: 'date' }, { title: '姓名', key: 'name' }, { title: '地址', key: 'address' } ], data: [ { date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' }, { date: '2016-05-04', name: '王小虎', address: '上海市普陀区金沙江路 1517 弄' }, { date: '2016-05-01', name: '王小虎', address: '上海市普陀区金沙江路 1519 弄' }, { date: '2016-05-03', name: '王小虎', address: '上海市普陀区金沙江路 1516 弄' } ] } } } </script> 复制代码
下图是上述代码片段的渲染结果:
示例
新增数据
演示地址: d2-projects.github.io/d2-admin/#/…修改数据
演示地址: d2-projects.github.io/d2-admin/#/…删除数据
演示地址: d2-projects.github.io/d2-admin/#/…表单校验
演示地址: d2-projects.github.io/d2-admin/#/…表格内编辑
演示地址: d2-projects.github.io/d2-admin/#/… 一个带有编辑删除功能的例子与直接使用 Element UI
的代码对比
使用D2 Crud:
<template> <div> <d2-crud ref="d2Crud" :columns="columns" :data="data" index-row selection-row :rowHandle="rowHandle" :form-template="formTemplate" @row-edit="handleRowEdit" @row-remove="handleRowRemove"/> </div> </template> <script> export default { data() { return { columns: [ { title: '日期', key: 'date' }, { title: '姓名', key: 'name' }, { title: '地址', key: 'address' } ], data: [ { date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' }, { date: '2016-05-04', name: '王小虎', address: '上海市普陀区金沙江路 1517 弄' }, { date: '2016-05-01', name: '王小虎', address: '上海市普陀区金沙江路 1519 弄' }, { date: '2016-05-03', name: '王小虎', address: '上海市普陀区金沙江路 1516 弄' } ], rowHandle: { edit: { size: 'mini' }, remove: { size: 'mini' } }, formTemplate: { date: { title: '日期', value: '' }, name: { title: '姓名', value: '' }, address: { title: '地址', value: '' } } } }, methods: { handleRowEdit ({index, row}, done) { this.$message({ message: '编辑成功', type: 'success' }) done() }, handleRowRemove ({index, row}, done) { this.$message({ message: '删除成功', type: 'success' }) done() } } } </script> 复制代码
直接使用Element UI的表格组件:
<template> <div> <el-table :data="tableData"> <el-table-column type="selection" width="55"> </el-table-column> <el-table-column type="index" width="50"> </el-table-column> <el-table-column prop="date" label="日期"> </el-table-column> <el-table-column prop="name" label="姓名"> </el-table-column> <el-table-column prop="address" label="地址"> </el-table-column> <el-table-column label="操作"> <template slot-scope="scope"> <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button> <el-button size="mini" type="danger" @click="handleDelete(scope.$index, tableData)">删除</el-button> </template> </el-table-column> </el-table> <el-dialog title="编辑" :visible.sync="showDialog"> <el-form> <el-form-item label="日期"> <el-input v-model="form.date"></el-input> </el-form-item> <el-form-item label="姓名"> <el-input v-model="form.name"></el-input> </el-form-item> <el-form-item label="地址"> <el-input v-model="form.address"></el-input> </el-form-item> </el-form> <span slot="footer" class="dialog-footer"> <el-button type="primary" @click="handleEditSave">确 定</el-button> </span> </el-dialog> </div> </template> <script> export default { data() { return { tableData: [ { date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' }, { date: '2016-05-04', name: '王小虎', address: '上海市普陀区金沙江路 1517 弄' }, { date: '2016-05-01', name: '王小虎', address: '上海市普陀区金沙江路 1519 弄' }, { date: '2016-05-03', name: '王小虎', address: '上海市普陀区金沙江路 1516 弄' } ], form: { date: '', name: '', address: '' }, showDialog: false } }, methods: { handleEdit (index, row) { this.showDialog = true this.editIndex = index this.form = row this.$message({ message: '编辑成功', type: 'success' }) }, handleEditSave () { this.showDialog = false }, handleDelete (index, rows) { this.$confirm('是否删除?', '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }).then(() => { rows.splice(index, 1) this.$message({ message: '删除成功', type: 'success' }) }) } } } </script> 复制代码
D2 Projects 简介
团队主页: github.com/d2-projects
在最后,如果你看完了,并且觉得还不错,希望可以到团队主上给我们的项目点一个 star 作为你对我们的认可与支持,谢谢。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网
猜你喜欢:- Handsontable 社区版 0.34.5 发布,Web 表格组件
- 开源 UI 库中,唯一同时实现了大表格虚拟化和树表格的 Table 组件 原 荐
- x-spreadsheet 1.0.33 发布,在线表格组件
- x-spreadsheet 1.1.6 发布,在线表格组件
- x-spreadsheet 1.0.22 发布,在线表格组件
- x-spreadsheet 1.0.23 发布,在线表格组件
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
精通CSS(第2版)
[英] Andy Budd、[英] Simon Collison、[英] Cameron Moll / 陈剑瓯 / 人民邮电出版社 / 2010-5 / 49.00元
本书汇集了最有用的CSS技术,介绍了CSS的基本概念和最佳实践,结合实例探讨了图像、链接和列表的操纵,还有表单设计、数据表格设计、纯CSS布局等核心CSS技术。此外,书中着眼于创建跨浏览器的技术,讨论了bug及其捕捉和修复技术,还将所有技术组合成两个精彩的实例,讲述这些技术的工作原理和实际用法。 本书适合具有HTML和CSS基础知识的读者阅读。一起来看看 《精通CSS(第2版)》 这本书的介绍吧!