按钮自定义
... 2022-3-9 About 2 min
# 按钮自定义
Tips
2.0.6+
# 自定义新增按钮
这里利用了menuLeft卡槽,同时设置addBtn为false，调用内置的新增打开弹窗方法rowAdd
<avue-crud :data="data" :option="option" ref="crud">
<template slot-scope="scope" slot="menuLeft">
<el-button type="danger"
icon="el-icon-plus"
size="small"
@click="$refs.crud.rowAdd()">新增</el-button>
</template>
</avue-crud>
<script>
export default {
data() {
return {
data: [
{
name:'张三',
sex:'男'
}, {
name:'李四',
sex:'女'
}
],
option:{
addBtn:false,
column:[
{
label:'姓名',
prop:'name'
}, {
label:'性别',
prop:'sex'
}
]
},
};
}
}
</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
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
Expand Copy Copy
# 自定义编辑和删除按钮
这里利用了menu卡槽,同时设置editBtn和delBtn为false，调用内置的编辑和删除方法rowEdit和rowDel,这里需要传入卡槽返回的2个值{row,index}当前行的数据和当前行的序号
<avue-crud :data="data" :option="option" ref="crud">
<template slot-scope="{row,index}" slot="menu">
<el-button type="danger"
icon="el-icon-edit"
size="small"
@click="$refs.crud.rowEdit(row,index)">编辑</el-button>
<el-button type="success"
icon="el-icon-delete"
size="small"
@click="$refs.crud.rowDel(row,index)">删除</el-button>
</template>
</avue-crud>
<script>
export default {
data() {
return {
data: [
{
name:'张三',
sex:'男'
}, {
name:'李四',
sex:'女'
}
],
option:{
delBtn:false,
editBtn:false,
column:[
{
label:'姓名',
prop:'name'
}, {
label:'性别',
prop:'sex'
}
]
},
};
}
}
</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
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
Expand Copy Copy
# 自定义查看按钮
这里利用了menu卡槽,调用内置查看方法rowView,这里需要传入卡槽返回的2个值{row,index}当前行的数据和当前行的序号
<avue-crud :data="data" :option="option" ref="crud">
<template slot-scope="{row,index}" slot="menu">
<el-button type="success"
icon="el-icon-delete"
size="small"
@click="$refs.crud.rowView(row,index)">查看</el-button>
</template>
</avue-crud>
<script>
export default {
data() {
return {
data: [
{
name:'张三',
sex:'男'
}, {
name:'李四',
sex:'女'
}
],
option:{
delBtn:false,
editBtn:false,
column:[
{
label:'姓名',
prop:'name'
}, {
label:'性别',
prop:'sex'
}
]
},
};
}
}
</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
# 自定义弹窗内按钮
新增和更新按钮要根据返回的type值判断，在menuForm卡槽中自定义按钮，调用内置方法即可
<avue-crud :data="data" :option="option" ref="crud">
<template slot-scope="{row,index,type}" slot="menuFormBefore">
<el-tag :type="type">提示</el-tag>
</template>
<template slot-scope="{row,index,type}" slot="menuForm">
<el-button type="primary"
icon="el-icon-check"
size="small"
v-if="type=='add'"
@click="$refs.crud.rowSave()"
>自定义新增</el-button>
<el-button type="primary"
icon="el-icon-check"
size="small"
v-if="type=='edit'"
@click="$refs.crud.rowUpdate()"
>自定义修改</el-button>
<el-button type="primary"
icon="el-icon-check"
size="small"
@click="$refs.crud.closeDialog()"
>取消</el-button>
</template>
</avue-crud>
<script>
export default {
data() {
return {
data: [
{
name:'张三',
sex:'男'
}, {
name:'李四',
sex:'女'
}
],
option:{
saveBtn:false,
updateBtn:false,
cancelBtn:false,
column:[
{
label:'姓名',
prop:'name'
}, {
label:'性别',
prop:'sex'
}
]
},
};
}
}
</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
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
Expand Copy Copy