一、失焦保存
1.1 双击失焦保存效果图
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/3cc31457da7d5409cf06e20d27a58475.gif)
1.2 双击失焦保存示例
<template>
<div class="app-container pull-height words">
<avue-crud
ref="crud"
:data="tableData"
:table-loading="tableLoading"
:option="tableOption"
@row-update="handleUpdate"
@row-dblclick="handleRowDBLClick">
</avue-crud>
</div>
</template>
<script>
import option from "./test";
export default {
name: "menu",
data() {
return {
addForm: {},
tableLoading: false,
tableData: [
{
id: 0,
name: '张三'
},
{
id: 1,
name: '李四'
}
],
tableOption: option,
};
},
created() {
},
mounted() {
window.handleBlur = this.handleBlur
},
methods: {
handleBlur(value){
console.log(value)
this.$refs.crud.rowCell(this.addForm, this.addForm.$index)
},
handleRowDBLClick(row, column, cell, event) {
this.addForm = row
console.log(row)
this.$refs.crud.rowCell(row, row.$index)
},
handleUpdate(row, index, done, loading) {
this.$message({
showClose: true,
message: "修改成功",
type: "success",
});
done();
}
},
};
</script>
<style lang="scss" scoped>
</style>
export default {
delBtn: false,
addBtn: false,
editBtn: false,
addRowBtn: true,
cellBtn: false,
cancelBtn: false,
menu: false,
column: [
{
label: '姓名',
prop: 'name',
cell: true,
rules: [
{
required: true,
message: '请输入姓名',
trigger: 'blur'
}
],
blur: (value) => window.handleBlur(value)
}
]
};
二、按钮保存
2.1 按钮保存效果图
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/1e5cf6cbbe4844facd3da7e933976924.gif#pic_center)
2.2 按钮保存示例
<template>
<avue-crud ref="crud" :option="option" :data="data" @row-update="rowUpdate">
<template slot-scope="{row,index}" slot="menu">
<el-button type="primary" icon="el-icon-edit" size="small" v-if="!row.$cellEdit" @click="rowCell(row,index)" circle></el-button>
<el-button type="success" icon="el-icon-check" size="small" v-else @click="rowCell(row,index)" circle></el-button>
<el-button type="warning" icon="el-icon-close" size="small" v-if="row.$cellEdit" @click="rowCancel(row,index)" circle></el-button>
</template>
</avue-crud>
</template>
<script>
export default {
name: 'demo.vue',
data() {
return {
drawer: false,
nodes: [],
openId: [],
openTitle: '',
openData: {},
data: [
{
id: 0,
name: '张三'
},
{
id: 1,
name: '李四'
}
],
option: {
delBtn: false,
addBtn: false,
editBtn: false,
addRowBtn: true,
cellBtn: false,
cancelBtn: false,
column: [
{
label: '姓名',
prop: 'name',
cell: true,
rules: [
{
required: true,
message: '请输入姓名',
trigger: 'blur'
}
]
}
]
}
}
},
methods: {
rowCell(row, index) {
this.$refs.crud.rowCell(row, index)
},
rowCancel(row, index) {
this.$refs.crud.rowCancel(row, index)
},
rowUpdate(form, index, done) {
this.$message.success(
'编辑数据' + JSON.stringify(form) + '数据序号' + index
)
done()
}
}
}
</script>