elementui 表单分块块标题
时间: 2023-07-19 20:03:49 浏览: 69
你可以使用 `el-collapse` 和 `el-collapse-item` 组件来实现表单的分块标题效果。具体步骤如下:
1. 在表单中使用 `el-collapse` 组件,将每个表单分块放在一个 `el-collapse-item` 中。
2. 在每个 `el-collapse-item` 中添加一个自定义的标题,可以使用 `slot` 插槽实现。
3. 给每个 `el-collapse-item` 添加一个 `name` 属性,用于控制展开和收起。
下面是一个示例代码,可以参考一下:
```html
<template>
<el-form>
<el-collapse v-model="activeNames">
<el-collapse-item title="基本信息" name="1">
<el-form-item label="姓名">
<el-input v-model="form.name"></el-input>
</el-form-item>
<el-form-item label="年龄">
<el-input v-model="form.age"></el-input>
</el-form-item>
</el-collapse-item>
<el-collapse-item title="联系方式" name="2">
<el-form-item label="电话">
<el-input v-model="form.phone"></el-input>
</el-form-item>
<el-form-item label="邮箱">
<el-input v-model="form.email"></el-input>
</el-form-item>
</el-collapse-item>
</el-collapse>
</el-form>
</template>
<script>
export default {
data() {
return {
activeNames: ['1'], // 默认展开第一块
form: {
name: '',
age: '',
phone: '',
email: ''
}
}
}
}
</script>
```