D2 Crud,一款简单易用的表格组件

D2 Crud,一款简单易用的表格组件

技术杂谈小彩虹2021-07-18 3:04:3440A+A-

D2-Crud 是一套基于Vue.js 2.2.0+Element UI 2.0.0+ 的表格组件。D2-CrudElement 的功能进行了封装,并增加了表格的增删改查、数据校验、表格内编辑等常用的功能。大部分功能可由配置 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 作为你对我们的认可与支持,谢谢。

加入小组

开源项目组官方公众号,关注及时获得最新更新资讯、文档地址、相关的技术文章:

2000 人 QQ 交流群,及时答疑解惑:

如果需要加微信群,请关注公众号在底部菜单获取二维码。

点击这里复制本文地址 以上内容由权冠洲的博客整理呈现,请务必在转载分享时注明本文地址!如对内容有疑问,请联系我们,谢谢!

支持Ctrl+Enter提交

联系我们| 本站介绍| 留言建议 | 交换友链 | 域名展示
本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除

权冠洲的博客 © All Rights Reserved.  Copyright quanguanzhou.top All Rights Reserved
苏公网安备 32030302000848号   苏ICP备20033101号-1

联系我们