AVue表格嵌套子表单
时间: 2023-07-28 22:09:53 浏览: 349
AVue表格支持嵌套子表单,可以通过设置 `type` 为 `subForm` 来实现。具体步骤如下:
1. 在表格中设置需要嵌套的列,将 `type` 设置为 `subForm`,并设置 `subFormConfig` 属性来配置子表单的表单项和提交地址。
```html
<avue-table :data="tableData">
<avue-table-column prop="name" label="姓名"></avue-table-column>
<avue-table-column prop="age" label="年龄"></avue-table-column>
<avue-table-column prop="address" label="地址" type="subForm" :subFormConfig="subFormConfig"></avue-table-column>
</avue-table>
```
2. 在组件的 `data` 中定义 `subFormConfig` 属性,包括子表单的表单项和提交地址等配置。
```javascript
data() {
return {
subFormConfig: {
fields: [{
key: 'province',
label: '省份',
type: 'input'
}, {
key: 'city',
label: '城市',
type: 'input'
}],
submit: {
url: '/api/saveAddress',
method: 'post'
}
}
}
}
```
其中,`fields` 定义了子表单的表单项,`submit` 定义了子表单的提交地址和方法。
3. 在子表单组件中,定义需要提交的表单数据,并调用 `this.submit()` 方法提交数据。
```html
<template>
<avue-form :fields="fields" :inline="true" ref="form"></avue-form>
<div class="form-actions">
<el-button type="primary" @click="submit">提交</el-button>
</div>
</template>
<script>
export default {
props: ['config'],
data() {
return {
fields: this.config.fields
}
},
methods: {
submit() {
this.$refs.form.submit(this.config.submit.url, this.config.submit.method)
}
}
}
</script>
```
这样就可以实现 AVue 表格中嵌套子表单的功能了。