tip:
- 项目中的表单,大都相同。每一个表单都包含查询和重置按钮,且大部分表单中都只有编码和名称这两个表单项
- 通过slot方式,处理特殊情况 (比如,该表单中只有名称或者其他),这里是匿名插槽
一、封装form组件
<template>
<div class="serachform-conatiner">
<el-form
:model="queryForm"
:inline="true"
ref="queryForm"
:label-width="labelWidth"
class="query-form"
>
<slot>
<el-form-item label="编码:" prop="code">
<el-input type="text" v-model="queryForm.code"></el-input>
</el-form-item>
<el-form-item label="名称:" prop="name">
<el-input type="text" v-model="queryForm.name"></el-input>
</el-form-item>
</slot>
<el-form-item>
<el-button
class="submit_btn"
type="primary"
@click="submitForm('queryForm')"
>查询</el-button
>
<el-button class="reset_btn" plain @click="resetForm('queryForm')"
>重置</el-button
>
</el-form-item>
</el-form>
</div>
</template>
<script>
export default {
props: {
queryForm: {
type: Object
},
labelWidth: {
//labelWidth默认80px,特殊的地方,可通过prop方式传它的值,做单独处理
type: String,
default() {
return "80px";
}
}
},
methods: {
submitForm(formName) {
//填写完成时,传回表单数据
this.$refs[formName].validate(valid => {
if (valid) {
this.$emit("submitForm", this.queryForm);
} else {
return false;
}
});
},
resetForm(formName) {
this.$refs[formName].resetFields();
}
}
};
</script>
<style lang="scss">
.serachform-conatiner {
border-top: 1px solid $border_color;
padding-top: 10px;
clear: both;
.query-form {
.el-input__inner {
border-radius: 0;
width: 172px;
}
}
.el-form-item--mini.el-form-item,
.el-form-item--small.el-form-item {
margin-bottom: 10px;
}
}
</style>
二、在组件中使用
注意:
:labelWidth="'70px'"
给子组件传递labelWidth属性,控制表单项label的宽度:queryForm="queryForm"
传递表单绑定的数据@submitForm="submitForm"
绑定提交函数- 中间的表单项,覆盖了原**
slot
**中的内容。
示例一
<template>
<div class="markdown-container">
<comn-form
:queryForm="queryForm"
@submitForm="submitForm"
>
</comn-form>
</div>
</template>
<script>
export default {
data() {
return {
queryForm: {
name: "",
code: ""
}
};
},
methods: {
submitForm(queryForm) {
console.log("queryForm", queryForm);
}
}
};
</script>
示例二
<template>
<div class="markdown-container">
<comn-form
:queryForm="queryForm"
@submitForm="submitForm"
:labelWidth="'70px'"
>
<el-form-item label="表名:" prop="tableName">
<el-input type="text" v-model="queryForm.tableName"></el-input>
</el-form-item>
<el-form-item label="列名:" prop="columnName">
<el-input type="text" v-model="queryForm.columnName"></el-input>
</el-form-item>
</comn-form>
</div>
</template>
<script>
export default {
data() {
return {
queryForm: {
tableName: "",
columnName: ""
}
};
},
methods: {
submitForm(queryForm) {
console.log("queryForm", queryForm);
}
}
};
</script>