按钮自定义
约 268 字小于 1 分钟
2025-2-5
自定义新增按钮
vue2
vue3
这里利用了`menu-left`卡槽,同时设置`addBtn`为`false`,调用内置的新增打开弹窗方法`rowAdd`
<template>
<tvue-crud :data="data"
:option="option"
ref="crud">
<template #menu-left>
<el-button type="danger"
icon="el-icon-plus"
@click="addRow">新增</el-button>
</template>
</tvue-crud>
</template>
<script setup>
import { ref } from 'vue';
import { ElMessage } from 'element-plus';
const data = ref([
{ name: '张三', sex: '男' },
{ name: '李四', sex: '女' }
]);
const option = {
addBtn: false,
column: [
{ label: '姓名', prop: 'name' },
{ label: '性别', prop: 'sex' }
]
};
const crud = ref(null);
function addRow () {
if (crud.value) {
crud.value.rowAdd();
} else {
ElMessage.error('CRUD组件未加载');
}
}
</script>自定义编辑和删除按钮
vue2
vue3
这里利用了`menu`卡槽,同时设置`editBtn`和`delBtn`为`false`,调用内置的编辑和删除方法`rowEdit`和`rowDel`,这里需要传入卡槽返回的2个值`{row,index}`当前行的数据和当前行的序号
<template>
<tvue-crud :data="data"
:option="option"
ref="crud">
<template #menu="{ row, index, size }">
<el-button type="danger"
:size="size"
icon="el-icon-edit"
@click="rowEdit(row, index)">编辑</el-button>
<el-button type="success"
:size="size"
icon="el-icon-delete"
@click="rowDel(row, index)">删除</el-button>
</template>
</tvue-crud>
</template>
<script setup>
import { ref } from 'vue';
const data = ref([
{ name: '张三', sex: '男' },
{ name: '李四', sex: '女' }
]);
const option = {
delBtn: false,
editBtn: false,
column: [
{ label: '姓名', prop: 'name' },
{ label: '性别', prop: 'sex' }
]
};
const crud = ref(null);
function rowEdit (row, index) {
if (crud.value) {
crud.value.rowEdit(row, index);
}
}
function rowDel (row, index) {
if (crud.value) {
crud.value.rowDel(row, index);
}
}
</script>自定义查看按钮
vue2
vue3
这里利用了`menu`卡槽,调用内置查看方法`rowView`,这里需要传入卡槽返回的2个值`{row,index}`当前行的数据和当前行的序号
<template>
<tvue-crud :data="data"
:option="option"
ref="crud">
<template #menu="{ row, index, size }">
<el-button type="success"
icon="el-icon-delete"
:size="size"
@click="rowView(row, index)">查看</el-button>
</template>
</tvue-crud>
</template>
<script setup>
import { ref } from 'vue';
const data = ref([
{ name: '张三', sex: '男' },
{ name: '李四', sex: '女' }
]);
const option = {
delBtn: false,
editBtn: false,
column: [
{ label: '姓名', prop: 'name' },
{ label: '性别', prop: 'sex' }
]
};
const crud = ref(null);
function rowView (row, index) {
if (crud.value) {
crud.value.rowView(row, index);
}
}
</script>自定义弹窗内按钮
vue2
vue3
新增和更新按钮要根据返回的`type`值判断,在`menu-form`卡槽中自定义按钮,调用内置方法即可
<template>
<tvue-crud :data="data"
:option="option"
ref="crud">
<template #menu-form-before="{ row, index, type }">
<el-tag type="primary"
:size="size">提示</el-tag>
</template>
<template #menu-form="{ row, index, type }">
<el-button type="primary"
icon="el-icon-check"
v-if="type === 'add'"
@click="rowSave">自定义新增</el-button>
<el-button type="primary"
icon="el-icon-check"
v-if="type === 'edit'"
@click="rowUpdate">自定义修改</el-button>
<el-button type="primary"
icon="el-icon-check"
@click="closeDialog">取消</el-button>
</template>
</tvue-crud>
</template>
<script setup>
import { ref } from 'vue';
const data = ref([
{ name: '张三', sex: '男' },
{ name: '李四', sex: '女' }
]);
const option = {
saveBtn: false,
updateBtn: false,
cancelBtn: false,
column: [
{ label: '姓名', prop: 'name' },
{ label: '性别', prop: 'sex' }
]
};
const crud = ref(null);
function rowSave () {
if (crud.value) {
crud.value.rowSave();
}
}
function rowUpdate () {
if (crud.value) {
crud.value.rowUpdate();
}
}
function closeDialog () {
if (crud.value) {
crud.value.closeDialog();
}
}
</script>