增删改查方法
... 2021-7-29 About 3 min
# 增删改查方法
Tips
可以参考自定义按钮更加灵活
# 新增数据
新增数据保存回调rowSave方法,执行done关闭当前表单,loading用于添加失败后不关闭弹窗，重新提交
<avue-crud :data="data" :option="option" @row-save="rowSave"></avue-crud>
<script>
export default {
data() {
return {
data: [
{
id:1,
name:'张三',
sex:'男'
}, {
id:2,
name:'李四',
sex:'女'
}
],
option:{
editBtn:false,
delBtn:false,
addBtnText:'新增数据',
addBtnIcon:'el-icon-user',
column:[
{
label:'姓名',
prop:'name'
}, {
label:'性别',
prop:'sex'
}
]
},
};
},
methods: {
rowSave(form,done,loading){
this.$message.success('模拟网络请求')
setTimeout(()=>{
this.$message.success('关闭按钮等待');
loading();
},1000)
setTimeout(()=>{
this.$message.success('新增数据'+ JSON.stringify(form));
done(form);
},2000)
}
}
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
Expand Copy Copy
# 修改数据
修改数据保存回调rowUpdate方法,执行done关闭当前表单,loading用于添加失败后不关闭弹窗，重新提交
<avue-crud :data="data" :option="option" @row-update="rowUpdate"></avue-crud>
<script>
export default {
data() {
return {
data: [
{
id:1,
name:'张三',
sex:'男'
}, {
id:2,
name:'李四',
sex:'女'
}
],
option:{
addBtn:false,
delBtn:false,
editBtnText:'修改数据',
editBtnIcon:'el-icon-user',
column:[
{
label:'姓名',
prop:'name'
}, {
label:'性别',
prop:'sex'
}
]
},
};
},
methods: {
rowUpdate(form,index,done,loading){
this.$message.success('模拟网络请求')
setTimeout(()=>{
this.$message.success('关闭按钮等待');
loading();
},1000)
setTimeout(()=>{
this.$message.success('编辑数据'+ JSON.stringify(form)+'数据序号'+index);
done(form);
},2000)
}
}
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
Expand Copy Copy
# 删除数据
修改数据保存回调rowDel方法
<avue-crud :data="data" :option="option" @row-del="rowDel"></avue-crud>
<script>
export default {
data() {
return {
data: [
{
id:1,
name:'张三',
sex:'男'
}, {
id:2,
name:'李四',
sex:'女'
}
],
option:{
editBtn:false,
addBtn:false,
delBtnText:'删除数据',
delBtnIcon:'el-icon-user',
column:[
{
label:'姓名',
prop:'name'
}, {
label:'性别',
prop:'sex'
}
]
},
};
},
methods: {
rowDel(form,index){
this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.$message({
type: 'success',
message: '删除成功!'
});
}).catch(() => { });
}
}
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
Expand Copy Copy
# 刷新数据
Tips
这里刷新按钮回调可以配合分页参数和方法去请求数据
点击刷新按钮回调refresh-change方法
<avue-crud :data="data" :option="option" @refresh-change="refreshChange"></avue-crud>
<script>
export default {
data() {
return {
data: [
{
id:1,
name:'张三',
sex:'男'
}, {
id:2,
name:'李四',
sex:'女'
}
],
option:{
addBtn:false,
menu:false,
column:[
{
label:'姓名',
prop:'name'
}, {
label:'性别',
prop:'sex'
}
]
},
};
},
methods: {
refreshChange(){
this.$message.success('刷新回调');
}
}
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
Expand Copy Copy
# 综合用法
在操作过程中吧数据放入done中,可以直接修改本地数据，做到及时刷新
<avue-crud :data="data" :option="option"
@refresh-change="refreshChange"
@row-save="rowSave"
@row-update="rowUpdate"
@row-del="rowDel"></avue-crud>
<script>
export default {
data() {
return {
data: [
{
id:1,
name:'张三',
sex:'男'
}, {
id:2,
name:'李四',
sex:'女'
}
],
option:{
column:[
{
label:'姓名',
prop:'name'
}, {
label:'性别',
prop:'sex'
}
]
},
};
},
methods: {
refreshChange(){
this.$message.success('刷新回调');
},
rowSave(form,done,loading){
form.id=new Date().getTime();
this.$message.success('模拟网络请求')
setTimeout(()=>{
this.$message.success('关闭按钮等待');
loading();
},1000)
setTimeout(()=>{
this.$message.success('新增数据'+ JSON.stringify(form));
done(form);
},2000)
},
rowDel(form,index,done){
this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
done(form)
this.$message({
type: 'success',
message: '删除成功!'
});
}).catch(() => { });
},
rowUpdate(form,index,done,loading){
this.$message.success('模拟网络请求')
setTimeout(()=>{
this.$message.success('关闭按钮等待');
loading();
},1000)
setTimeout(()=>{
this.$message.success('编辑数据'+ JSON.stringify(form)+'数据序号'+index);
done(form);
},2000)
},
}
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
Expand Copy Copy