封装一个Form表单组件和Table组件
有关后台管理系统之前写过四遍博客,看这篇之前最好先看下这四篇博客。另外这里只展示关键部分代码,项目代码放在github上: mall-manage-system
1、Vue + Element-ui实现后台管理系统(1) — 总述
2、Vue + Element-ui实现后台管理系统(2) — 项目搭建 + ⾸⻚布局实现
3、Vue + Element-ui实现后台管理系统(3) — 面包屑 + Tag标签切换功能
4、Vue + Element-ui实现后台管理系统(4)—封装一个ECharts组件的一点思路
这篇主要讲解实现图表的功能:
整体效果
图片效果
一、封装一个Form表单组件
1、封装思路
我们需要看下一个基础form组件,需要哪些数据。我们看下官网一个示例 Form 表单
<template>
<el-form ref="form" :model="form" label-width="80px">
<el-form-item label="姓名" >
<el-input v-model="form.name" style="width: 195px"></el-input>
</el-form-item>
<el-form-item label="国籍">
<el-select v-model="form.region" placeholder="请选择国籍">
<el-option label="中国" value="china"></el-option>
<el-option label="美国" value="America"></el-option>
</el-select>
</el-form-item>
<el-form-item label="爱好">
<el-checkbox-group v-model="form.type">
<el-checkbox label="画画" name="type" ></el-checkbox>
<el-checkbox label="吹泡泡" name="type"></el-checkbox>
<el-checkbox label="放风筝" name="type"></el-checkbox>
<el-checkbox label="看佩琦" name="type"></el-checkbox>
</el-checkbox-group>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit" size="small">立即创建</el-button>
</el-form-item>
</el-form>
</template>
<script>
export default {
data() {
return {
form: {
name: '',
region: '',
type: []
}
}
},
methods: {
onSubmit() {
console.log('提交 -> ' + this.form.name + " " + this.form.region + " " + this.form.type );
}
}
}
</script>
运行结果
从这个简单的示例,至少有两份数据是需要父组件传入到表单组件中的:
1、v-model对应的数据,这份数据是用户选择好后给父组件的,所以是双向绑定的。
2、label 对应的数据,这里是写死的,既然要封装成一个控件那么这份数据也需要父组件传过来。
注意
这里需要注意的一点就是标签的类型是i