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