封装一个el-form
时间: 2023-05-24 08:03:56 浏览: 178
el-table,el-form在vue中封装组件化,含操作按钮和插槽.pdf
5星 · 资源好评率100%
A:
首先,需要引入Element UI库和Vue.js:
```html
<!-- 引入Element UI CSS -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入Vue.js -->
<script src="https://unpkg.com/vue"></script>
<!-- 引入Element UI JS -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
```
接着,可以封装一个el-form组件:
```html
<template>
<el-form ref="form" :model="form" :rules="rules" :label-width="labelWidth" :inline="inline" :disabled="disabled">
<slot></slot>
<el-form-item>
<el-button type="primary" @click="submitForm">{{ buttonText }}</el-button>
</el-form-item>
</el-form>
</template>
<script>
export default {
name: 'elForm',
props: {
model: {
type: Object,
default: () => ({})
},
rules: Object,
buttonText: {
type: String,
default: '提交'
},
labelWidth: String,
inline: Boolean,
disabled: Boolean,
onSubmit: {
type: Function,
default: () => {}
}
},
data() {
return {
form: this.model
}
},
methods: {
submitForm() {
this.$refs.form.validate(valid => {
if (valid) {
this.onSubmit(this.form)
}
})
}
}
}
</script>
```
这个组件的作用是在Element UI的el-form组件基础上进行二次封装,实现以下功能:
- 可以通过props传入form的model和rules
- 可以通过props传入labelWidth、inline、disabled等属性
- 可以插入自定义的el-form-item组件
- 可以自定义提交按钮的文案和点击事件
使用时,可以像下面这样调用:
```html
<el-form :model="form" :rules="rules">
<el-form-item label="用户名" prop="username">
<el-input v-model="form.username"></el-input>
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input type="password" v-model="form.password"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm">登录</el-button>
</el-form-item>
</el-form>
```
其中,submitForm是父组件中的一个方法,用于处理表单提交事件。在这个方法中,可以获取到整个表单的数据,并进行提交处理。
阅读全文