Vue+Element-ui实现后台管理系统（5）---封装⼀个Form表单组件和Tabl。。。
封装⼀个Form表单组件和Table组件
有关后台管理系统之前写过四遍博客，看这篇之前最好先看下这四篇博客。另外这⾥只展⽰关键部分代码，项⽬代码放在github上：
1、
2、
3、
4、
这篇主要讲解实现图表的功能：
整体效果
图⽚效果
⼀、封装⼀个Form表单组件
1、封装思路
我们需要看下⼀个基础form组件，需要哪些数据。我们看下官⽹⼀个⽰例
<template>
<el-form ref="form" :model="form" label-width="80px">
<el-form-item label="姓名" >
<el-input v-model="form.name" ></el-input>
</el-form-item>
<el-form-item label="国籍">
<el-select v-model="ion" 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="pe">
<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 + " " + ion + " " + pe );
}
}
}
</script>
运⾏结果
从这个简单的⽰例,⾄少有两份数据是需要⽗组件传⼊到表单组件中的:
1、v-model对应的数据，这份数据是⽤户选择好后给⽗组件的，所以是双向绑定的。
2、label 对应的数据，这⾥是写死的，既然要封装成⼀个控件那么这份数据也需要⽗组件传过来。
注意这⾥需要注意的⼀点就是标签的类型是input 还是select是需要外⾯传来过来的数据告知的。同时如果是select那么还需要把option下⾯的数据返回。
2、封装Form组件
新建⼀个CommonForm.vue，作为封装Form的组件
<template>
<!--是否⾏内表单-->
<el-form :inline="inline" :model="form" ref="form" label-width="100px">
<!--标签显⽰名称-->
<el-form-item v-for="item in formLabel" :key="del" :label="item.label">
<!--根据type来显⽰是什么标签-->
<el-input v-model="del]" :placeholder="'请输⼊' + item.label" v-if="pe==='input'"></el-input>
<el-select v-model="del]" placeholder="请选择" v-if="pe === 'select'">
<!--如果是select或者checkbox 、Radio就还需要选项信息-->
<el-option v-for="item in item.opts" :key="item.value" :label="item.label" :value="item.value"></el-option>
</el-select>
<el-switch v-model="del]" v-if="pe === 'switch'"></el-switch>
<el-date-picker v-model="del]" type="date" placeholder="选择⽇期" v-if="pe === 'date'" value-format="yyyy-MM-dd"> </el-date-picker> </el-form-item>
<!--留⼀个插槽-->
<el-form-item><slot></slot></el-form-item>
</el-form>
</template>
<script>
export default {
//inline 属性可以让表单域变为⾏内的表单域
//form 表单数据 formLabel 是标签数据
props: {
inline: Boolean,
form: Object,
formLabel: Array
}
}
</script>
这样⼀个简单的表单公共组件就完成了。
⼀、封装⼀个Table组件
1、封装思路
同样我们需要去看下element有关表格最简单的⽰例。
代码⽰例
<template>
<el-table
:data="tableData"
>
<el-table-column
prop="date"
label="⽇期"
width="180">
</el-table-column>
<el-table-column
prop="name"
label="姓名"
width="180">
</el-table-column>
<el-table-column
prop="address"
label="地址">
</el-table-column>
</el-table>
</template>
<script>
export default {
data() {
return {
tableData: [{
date: '2017-05-04',
name: '⼩⼩',
address: '浙江省杭州市千岛湖镇阳光路'
}, {
date: '1956-05-04',
name: '爷爷',
address: '浙江省杭州市千岛湖镇清波花园'
}, {
date: '1958-05-04',
name: '奶奶',
address: '浙江省杭州市千岛湖镇冬⽠乌'
}]
}
}
}
</script>
运⾏结果
从这个简单的⽰例,⾄少也是两份数据是需要⽗组件传⼊到表格组件中的：
1、v-model对应的数据，这份数据是⽤户选择好后给⽗组件的。
2、label 对应的数据，这⾥是写死的，既然要封装成⼀个控件那么这份数据也需要外⾯传过来。
注意这⾥除了上⾯这两份数据外，还有⼀份数据在实际开发中也是需要的，那就是分页信息，因为⼀般table数据都会⽐较多所以分页还是⾮常需要的。
2、封装Table组件
新建⼀个CommonTable.vue，作为封装Table的组件
<template>
<div class="common-table">
<!--stripe 是否为斑马纹 v-loading在请求数据未返回的时间有个加载的图案，提⾼⽤户体验-->
<el-table :data="tableData" height="90%" stripe v-loading="config.loading">
<!--第⼀⾏为序号默认写死-->
<el-table-column label="序号" width="85">
<!--slot-scope="scope" 这⾥取到当前单元格,scope.$index就是索引默认从0开始这⾥从1开始-->
<template slot-scope="scope">
<span >{{ (config.page - 1) * 20 + scope.$index + 1 }}</span>
</template>
</el-table-column>
<!--show-overflow-tooltip 当内容过长被隐藏时显⽰ tooltip-->
<el-table-column show-overflow-tooltip v-for="item in tableLabel" :key="item.prop" :label="item.label" :width="item.width ? item.width : 125">
<!--其实可以在上⾯:prop="item.prop"就可以显⽰表单数据这⾥设置插槽的⽅式话更加灵活我们可以写样式-->
<template slot-scope="scope">
<span >{{ w[item.prop] }}</span>
</template>
</el-table-column>
<!--操作-->
<el-table-column label="操作" min-width="180">
<template slot-scope="scope">
<el-button size="min" @click="w)">编辑</el-button>
<el-button size="min" type="danger" @click="w)">删除</el-button>
</template>
</el-table-column>
</el-table>
<!--分页-->
<el-pagination class="pager" layout="prev, pager, next" :total="al" :current-page.sync="config.page" @current-change="changePage" :page-size="20"></el-pagination> </div>
</template>
<script>
// config分页数据，这⾥⾯⾄少包括当前页码总数量
export default {
props: {
tableData: Array,
tableLabel: Array,
config: Object
},
methods: {
//更新
handleEdit(row) {
this.$emit('edit', row)
},
//删除
handleDelete(row) {
this.$emit('del', row)
},
//分页
changePage(page) {
this.$emit('changePage', page)
}
}
}
</script>
三、⽰例
这⾥展⽰⽤户管理组件(UserManage.vue)，它使⽤了上⾯两个封装后的组件。
<template>
<div class="manage">
<el-dialog :title="operateType === 'add' ? '新增⽤户' : '更新⽤户'" :visible.sync="isShow">
<common-form :formLabel="operateFormLabel" :form="operateForm" ref="form"></common-form>
<div slot="footer" class="dialog-footer">
<el-button @click="isShow = false">取消</el-button>
<el-button type="primary" @click="confirm">确定</el-button>
</div>
</el-dialog>
<div class="manage-header">
<el-button type="primary" @click="addUser">+ 新增</el-button>
<common-form inline :formLabel="formLabel" :form="searchFrom">
<el-button type="primary" @click="getList(searchFrom.keyword)">搜索</el-button>
</common-form>
</div>
vue element admin<!--依次是: 表格数据表格标签数据分页数据列表⽅法更新⽅法删除⽅法-->
<common-table :tableData="tableData" :tableLabel="tableLabel" :config="config" @changePage="getList()" @edit="editUser" @del="delUser"></common-table>
</div>
</template>
<script>
import CommonForm from '../../components/CommonForm'
import CommonTable from '../../components/CommonTable'
export default {
components: {
CommonForm,
CommonTable
},
data() {
return {
operateType: 'add',
isShow: false,
tableData: [],
tableLabel: [
{
prop: 'name',
label: '姓名'
},
{
prop: 'age',
label: '年龄'
},
{
prop: 'sexLabel', label: '性别'
},
{
prop: 'birth',
label: '出⽣⽇期', width: 200
},
{
prop: 'addr',
label: '地址',
width: 320
}
],
config: {
page: 1,
total: 30,
loading: false
},
operateForm: {
name: '',
addr: '',
age: '',
birth: '',
sex: ''
},
operateFormLabel: [ {
model: 'name', label: '姓名',
type: 'input'
},
{
model: 'age',
label: '年龄',
type: 'input'
},
{
model: 'sex',
label: '性别',
type: 'select',
opts: [
{
label: '男', value: 1
},
{
label: '⼥', value: 0
}
]
},
{
model: 'birth',
label: '出⽣⽇期', type: 'date'
},
{
model: 'addr',
label: '地址',
type: 'input'
}
],
searchFrom: {
keyword: ''
},
formLabel: [
{
model: 'keyword', label: '',
type: 'input'
}
]
}
},
methods: {
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论