vue学习笔记--d2-curd使用

d2-curd是专门处理表格的组件，根据自己理解它可以处理表格数据 按钮等常规的操作。
具体使用方法：
安装插件：也可以用cnpm安装

npm i element-ui @d2-projects/d2-crud -S

写入main.js文件中

import D2Crud from '@d2-projects/d2-crud'
Vue.use(D2Crud)

现在 就可以使用了！以下是利用d2-curd将模拟数据应用到Dom代码片段

<d2-crud
//绑定数据
:data="all"
//全选
selection-row
@selection-change="selsChange"
//循环表头
:columns="tabHeader"
//高亮显示选中行
highlight-current-row
:options="options"
//所有的行操作再这里处理
:rowHandle="rowHandle"
:form-template="formTemplate"
// 所有的弹出框
@dialog-cancel="handleDialogCancel"
//新增
:add-button="addButton"
@row-add="handleRowAdd"
// 删除
@row-remove="handleRowRemove"
//编辑
@row-edit="handleRowEdit" >
</d2-crud>

在script 标签中

export default {
data () {
return {
sels: [], // 列表选中列
all: [],
tabHeader:[],
rowHandle: {
width:250,
//删除
remove: {
size: 'mini',
fixed: 'left',
confirm: true
},
//修改
columnHeader: '修改',
edit: {
text: '修改',
size: 'mini',
fixed: 'right'
},
// 查看 自定义
custom: [
{
text: '查看',
type: 'plain',
size: 'mini',
emit: 'custom-emit-1',
float: 'right'
}
],
},
//新增
addButton: {
icon: 'el-icon-plus',
size: 'mini',
type:'primary',
},
options: {
height: '600', //流体高度
stripe: true,
defaultSort: {
prop: 'type'
}
},
formOptions: {
labelWidth: '80px',
labelPosition: 'left',
saveLoading: false
},
//修改 弹框模版
formTemplate: {
name: {
title: '名称',
value: ''
}，
type: {
title: '账户类型',
value: ''
}
},
//单选删除
remove: {
size: 'small',
fixed: 'right',
type: 'danger',
confirm: true
},
}
},
methods: {
//删除
handleRowRemove ({index, row}, done) {
setTimeout(() => {
console.log(index)
console.log(row)
this.message({
message: '保存成功',
type: 'success'
});
done()
this.formOptions.saveLoading = false
}, 300);
},
//编辑
handleRowEdit ({index, row}, done) {
this.formOptions.saveLoading = true
setTimeout(() => {
console.log(index)
console.log(row)
this.message({
message: '取消保存',
type: 'warning'
});
done()
},
},
mounted () {
this.tabHeader = response.data.tabHeader
all是从外部引入的模拟数据
this.all = response.data.all
},
}
</script>

自定义的按钮需要在rowHandle中传入custom数组对象来自定义模式，对象属性支持所有的 el-button 属性