D2-crud is a set of table components based on vue.js 2.2.0+ and Element UI 2.0.0+. D2-crud encapsulates Element’s functions, and adds common functions such as adding, deleting, modifying and checking tables, data verification, and editing tables. Most of the functions can be realized by configuring JSON. In addition to realizing and expanding the function of Elememt table component, the development difficulty is reduced, the amount of code is reduced, and the development process is greatly simplified.
GitHub:github.com/d2-projects…
Documents: d2 – projects. Making. IO/d2 – admin – do…
Example: d2 – projects. Making. IO/d2 – admin / # /…
If your network is not good (the sample project contains a large number of examples), please start the full clone project locally.
The author
The account that posted this post is not the original author account of D2-CRUd.
Author’s gold digger address: @Forgotten legend.
The author making sunhaoxiang
Welcome to pay attention to support him, but also support us to continue open source ~
Function introduction
- Inherits all the functions of the table in Element
- Table new data
- Table modification data
- Table delete data
- Use components in Element to render table content and edit form content
- Form edit verification
- In-table direct edit mode
How to use
Install using NPM:
npm i element-ui @d2-projects/d2-crud -S
Copy the codeInstall using YARN:
yarn add element-ui @d2-projects/d2-crud
Copy the codeWrite the following in 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)
})
Copy the codeA simple table example:
<template>
<div>
<d2-crud
ref="d2Crud"
:columns="columns"
:data="data"/>
</div>
</template>
<script>
export default {
data () {
return {
columns: [{title: 'date'.key: 'date'
},
{
title: 'name'.key: 'name'
},
{
title: 'address'.key: 'address'}].data: [{date: '2016-05-02'.name: 'Wang Xiaohu'.address: Lane 1518, Jinshajiang Road, Putuo District, Shanghai
},
{
date: '2016-05-04'.name: 'Wang Xiaohu'.address: Lane 1517, Jinshajiang Road, Putuo District, Shanghai
},
{
date: '2016-05-01'.name: 'Wang Xiaohu'.address: Lane 1519, Jinshajiang Road, Putuo District, Shanghai
},
{
date: '2016-05-03'.name: 'Wang Xiaohu'.address: Lane 1516, Jinshajiang Road, Putuo District, Shanghai}]}}}</script>
Copy the codeBelow is a rendering of the code snippet above:
The sample
The new data
D2 – projects. Making. IO/d2 – admin / # /…
Modify the data
D2 – projects. Making. IO/d2 – admin / # /…
Delete the data
D2 – projects. Making. IO/d2 – admin / # /…
Form validation
D2 – projects. Making. IO/d2 – admin / # /…
In-table editing
D2 – projects. Making. IO/d2 – admin / # /…
An example with edit delete function and direct useElement UICode comparison of
Using 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: 'date'.key: 'date'
},
{
title: 'name'.key: 'name'
},
{
title: 'address'.key: 'address'}].data: [{date: '2016-05-02'.name: 'Wang Xiaohu'.address: Lane 1518, Jinshajiang Road, Putuo District, Shanghai
},
{
date: '2016-05-04'.name: 'Wang Xiaohu'.address: Lane 1517, Jinshajiang Road, Putuo District, Shanghai
},
{
date: '2016-05-01'.name: 'Wang Xiaohu'.address: Lane 1519, Jinshajiang Road, Putuo District, Shanghai
},
{
date: '2016-05-03'.name: 'Wang Xiaohu'.address: Lane 1516, Jinshajiang Road, Putuo District, Shanghai}].rowHandle: {
edit: {
size: 'mini'
},
remove: {
size: 'mini'}},formTemplate: {
date: {
title: 'date'.value: ' '
},
name: {
title: 'name'.value: ' '
},
address: {
title: 'address'.value: ' '}}}},methods: {
handleRowEdit ({index, row}, done) {
this.$message({
message: 'Edit succeeded'.type: 'success'
})
done()
},
handleRowRemove ({index, row}, done) {
this.$message({
message: 'Deleted successfully'.type: 'success'
})
done()
}
}
}
</script>
Copy the codeUse the Table component directly with 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="Date">
</el-table-column>
<el-table-column
prop="name"
label="Name">
</el-table-column>
<el-table-column
prop="address"
label="Address">
</el-table-column>
<el-table-column label="Operation">
<template slot-scope="scope">
<el-button
size="mini"
@click="handleEdit(scope.$index, scope.row)">The editor</el-button>
<el-button
size="mini"
type="danger"
@click="handleDelete(scope.$index, tableData)">delete</el-button>
</template>
</el-table-column>
</el-table>
<el-dialog
title="Edit"
:visible.sync="showDialog">
<el-form>
<el-form-item label="Date">
<el-input v-model="form.date"></el-input>
</el-form-item>
<el-form-item label="Name">
<el-input v-model="form.name"></el-input>
</el-form-item>
<el-form-item label="Address">
<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">determine</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
export default {
data() {
return {
tableData: [{date: '2016-05-02'.name: 'Wang Xiaohu'.address: Lane 1518, Jinshajiang Road, Putuo District, Shanghai
},
{
date: '2016-05-04'.name: 'Wang Xiaohu'.address: Lane 1517, Jinshajiang Road, Putuo District, Shanghai
},
{
date: '2016-05-01'.name: 'Wang Xiaohu'.address: Lane 1519, Jinshajiang Road, Putuo District, Shanghai
},
{
date: '2016-05-03'.name: 'Wang Xiaohu'.address: Lane 1516, Jinshajiang Road, Putuo District, Shanghai}].form: {
date: ' '.name: ' '.address: ' '
},
showDialog: false}},methods: {
handleEdit (index, row) {
this.showDialog = true
this.editIndex = index
this.form = row
this.$message({
message: 'Edit succeeded'.type: 'success'
})
},
handleEditSave () {
this.showDialog = false
},
handleDelete (index, rows) {
this.$confirm('Delete? '.'tip', {
confirmButtonText: 'sure'.cancelButtonText: 'cancel'.type: 'warning'
}).then((a)= > {
rows.splice(index, 1)
this.$message({
message: 'Deleted successfully'.type: 'success'})})}}}</script>
Copy the codeD2 Projects introduction
Team home page: github.com/d2-projects
In the end, if you finish reading it and think it’s good, we hope you can give our project a STAR to the team leader as your recognition and support. Thank you.
Join the team
Open source project team official official account, pay attention to the latest update information, document address, related technical articles:
2000 people QQ communication group, timely answer questions:
If you need to add wechat group, please follow the menu at the bottom of the official account to obtain the QR code.