要在vben-admin的BasicTable中
配置表单并新增按钮，需要进行以下步骤：
1. 在vue页面中引入BasicTable组件：
```
<template>
<basic-table
:columns="columns"
:api="api"
:search="search"
:pagination="pagination"
:actions="actions"
:selectable="selectable"
@change="handleChange"
/>
</template>
<script>
import BasicTable from '@/components/BasicTable';
export default {
components: {
BasicTable,
},
data() {
return {
columns: [], // 表头
api: '', // 接口地址
search: {}, // 搜索
条件
pagination: {}, // 分页
配置
actions: [], // 操作按钮
selectable: false, // 是否可选
};
},
methods: {
handleChange(data) {
console.log(data);
},
},
};
</script>
```
2. 在data中
配置表单的数据对象：
```
data() {
return {
columns: [
// 表头
配置
],
api: '', // 接口地址
search: {}, // 搜索
条件
pagination: {}, // 分页
配置
actions: [
// 操作按钮
配置
],
selectable: false, // 是否可选
formData: {}, //
表单数据对象
formVisible: false, // 是否显示
表单
};
},
```
3. 在表格的操作按钮
配置中添加新增按钮：
```
actions: [
{
text: '新增',
type: 'primary',
onClick: () => {
this.formVisible = true;
},
},
// 其他操作按钮
],
```
4. 在BasicTable组件中添加
表单组件：
```
<template>
<div>
<basic-form
v-if="formVisible"
:title="'新增'"
:data="formData"
:rules="rules"
@submit="handleSubmit"
@cancel="handleCancel"
>
<!--
表单内容 -->
</basic-form>
<basic-table
:columns="columns"
:api="api"
:search="search"
:pagination="pagination"
:actions="actions"
:selectable="selectable"
@change="handleChange"
/>
</div>
</template>
```
5. 在methods中添加
表单的提交和取消方法：
```
methods: {
handleChange(data) {
console.log(data);
},
handleSubmit() {
// 提交
表单数据
// 成功后关闭
表单弹窗
this.formVisible = false;
},
handleCancel() {
// 取消
表单操作
// 关闭
表单弹窗
this.formVisible = false;
},
},
```
6. 在BasicTable组件中添加
表单的校验规则：
```
data() {
return {
columns: [
// 表头
配置
],
api: '', // 接口地址
search: {}, // 搜索
条件
pagination: {}, // 分页
配置
actions: [
// 操作按钮
配置
],
selectable: false, // 是否可选
formData: {}, //
表单数据对象
formVisible: false, // 是否显示
表单
rules: {
//
表单校验规则
},
};
},
```
这样
配置后，就可以在BasicTable中
实现表单的
配置和新增按钮的功能了。
最低0.47元/天 解锁文章
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
