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>
複製程式碼下圖是上述程式碼片段的渲染結果：
示例
新增資料
修改資料
刪除資料
表單校驗
表格內編輯
一個帶有編輯刪除功能的例子與直接使用 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 簡介
在最後，如果你看完了，並且覺得還不錯，希望可以到團隊主上給我們的專案點一個 star 作為你對我們的認可與支援，謝謝。
加入小組
開源專案組官方公眾號，關注及時獲得最新更新資訊、文件地址、相關的技術文章：
2000 人 QQ 交流群，及時答疑解惑：
如果需要加微信群，請關注公眾號在底部選單獲取二維碼。