帮我用vue+element-ui封装个el-tabs 下分块包含 el-form的组件
时间: 2023-05-23 17:02:19 浏览: 427
好的,我可以帮你实现这个功能。您需要创建一个包含el-tabs和el-form组件的父组件,例如:
```
<template>
<el-tabs v-model="activeName" @tab-click="handleClick">
<el-tab-pane label="分块1" name="1">
<el-form :model="form" label-width="80px">
<!-- 在这里添加表单内容 -->
</el-form>
</el-tab-pane>
<el-tab-pane label="分块2" name="2">
<el-form :model="form" label-width="80px">
<!-- 在这里添加表单内容 -->
</el-form>
</el-tab-pane>
</el-tabs>
</template>
```
您还需要在该组件的script部分创建如下变量和方法:
```
<script>
export default {
data () {
return {
activeName: '1', // 当前选中的tab
form: { // 表单数据
// 在这里添加表单数据
}
}
},
methods: {
handleClick (tab, event) { // 响应点击事件
console.log(tab, event)
}
}
}
</script>
```
最后,您可以使用element-ui的组件绑定方式将该组件使用到您的页面中,例如:
```
<template>
<div>
<my-tabs></my-tabs>
</div>
</template>
<script>
import MyTabs from '@/components/MyTabs.vue' // 将组件引入
export default {
components: {
MyTabs
}
}
</script>
```
这样就可以通过vue element-ui封装一个el-tabs 下分块包含 el-form的组件了。
阅读全文