关键词：
封装一个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 对应的数据，这里是写死的，既然要封装成一个控件那么这份数据也需要父组件传过来。
注意 这里需要注意的一点就是标签的类型是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="item.model" :label="item.label">
<!--根据type来显示是什么标签-->
<el-input v-model="form[item.model]" :placeholder="\'请输入\' + item.label" v-if="item.type===\'input\'"></el-input>
<el-select v-model="form[item.model]" placeholder="请选择" v-if="item.type === \'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="form[item.model]" v-if="item.type === \'switch\'"></el-switch>
<el-date-picker v-model="form[item.model]" type="date" placeholder="选择日期" v-if="item.type === \'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有关表格最简单的示例。Table 表格
代码示例
<template>
<el-table
:data="tableData"
style="width: 100%">
<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 style="margin-left: 10px"> (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 style="margin-left: 10px"> scope.row[item.prop] </span>
</template>
</el-table-column>
<!--操作-->
<el-table-column label="操作" min-width="180">
<template slot-scope="scope">
<el-button size="min" @click="handleEdit(scope.row)">编辑</el-button>
<el-button size="min" type="danger" @click="handleDelete(scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
<!--分页-->
<el-pagination class="pager" layout="prev, pager, next" :total="config.total" :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>
<!--依次是: 表格数据 表格标签数据 分页数据 列表方法 更新方法 删除方法-->
<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:
getList(name = \'\')
this.config.loading = true
// 搜索时，页码需要设置为1，才能正确返回数据，因为数据是从第一页开始返回的
name ? (this.config.page = 1) : \'\'
this.$http
.get(\'/api/user/getUser\',
params:
page: this.config.page,
name
)
.then(res =>
this.tableData = res.data.list.map(item =>
item.sexLabel = item.sex === 0 ? \'女\' : \'男\'
return item
)
this.config.total = res.data.count
this.config.loading = false
)
,
addUser()
this.operateForm =
this.operateType = \'add\'
this.isShow = true
,
editUser(row)
this.operateType = \'edit\'
this.isShow = true
this.operateForm = row
,
confirm()
if (this.operateType === \'edit\')
console.log(this.operateForm)
this.$http.post(\'/api/user/edit\', this.operateForm).then(res =>
console.log(res.data)
this.isShow = false
this.getList()
)
else
this.$http.post(\'/api/user/add\', this.operateForm).then(res =>
console.log(res.data)
this.isShow = false
this.getList()
)
,
delUser(row)
this.$confirm(\'此操作将永久删除该文件, 是否继续?\', \'提示\',
confirmButtonText: \'确定\',
cancelButtonText: \'取消\',
type: \'warning\'
)
.then(() =>
let id = row.id
this.$http
.get(\'/api/user/del\',
params:
id
)
.then(res =>
console.log(res.data)
this.$message(
type: \'success\',
message: \'删除成功!\'
)
this.getList()
)
)
.catch(() =>
this.$message(
type: \'info\',
message: \'已取消删除\'
)
)
,
created()
this.getList()
</script>
<style lang="scss" scoped>
@import \'@/assets/scss/common\';
</style>
别人骂我胖，我会生气，因为我心里承认了我胖。别人说我矮，我就会觉得好笑，因为我心里知道我不可能矮。这就是我们为什么会对别人的攻击生气。
攻我盾者，乃我内心之矛(15)
vue+element-ui实现后台管理系统---封装一个form表单组件和table表格组件(代码片段)
封装一个Form表单组件和Table组件有关后台管理系统之前写过四遍博客,看这篇之前最好先看下这四篇博客。另外这里只展示关键部分代码，项目代码放在github上：mall-manage-system1、Vue+Element-ui实现后台管理系统(1)---总述2、Vue+Element-u... 查看详情
vue+element-ui实现后台管理系统---封装一个form表单组件和table表格组件(代码片段)
封装一个Form表单组件和Table组件有关后台管理系统之前写过四遍博客,看这篇之前最好先看下这四篇博客。另外这里只展示关键部分代码，项目代码放在github上：mall-manage-system1、Vue+Element-ui实现后台管理系统(1)---总述2、Vue+Element-u... 查看详情
实战项目：基于vue第三方库element-ui实现的金融后台管理系统
...2-element-touzi-admin项目是vue2.0+element-ui+node+mongodb构建的后台管理系统，所有的数据都是从服务器实时获取的真实数据，具有真实的注册、登录、数据显示、新增数据、修改数据、删除数据等功能。前端：vue2+vuex+vue-router+webpack2.0+ES6/... 查看详情
使用vue2+element-ui+vuex实现后台管理系统的头部背景色动态点击修改(代码片段)
**以下内容仅供自己学习使用话不多说，直接上代码首先去vuex里面importVuefrom\'vue\';importVuexfrom\'vuex\';Vue.use(Vuex);conststore=newVuex.Store(state:headerColor:\'default-header\',//定义一个默认的颜色,mutations: //setHeaderColor方法可以用来修改headerColor... 查看详情
java项目:角色权限后台脚手架系统(java+springboot+maven+mybaits-plus+vue+element-ui+mysql)
Springboot框架+myBaits-Plus+MySQL实现的角色权限后台管理脚手架系统实战项目，实现的是所有系统最基础的后台管理功能，有了这个脚手架，以后开发别的项目就在这上面快速增加功能即可。本系统主要实现的功能... 查看详情
基于vue实现的新闻后台管理系统-二
基础环境及最后的开发效果已完成说明，接下来就开始配置。?npm初始化新建项目文件夹VueDemo，在其内执行如下脚本npminit-y安装vue-cli构建包yarnaddvue-cliyarninstall安装如下npm包axios:用于发送类似Ajax请求element-ui:用于构建页面yarnaddaxio... 查看详情
使用vuejs2.0和element-ui搭建的一个后台管理界面
说明： 这是一个用vuejs2.0和element-ui搭建的后台管理界面。相关技术： vuejs2.0：一套构建用户界面的渐进式JavaScript框架，易用、灵活、高效。 element-ui：一套为开发者、设计师和产品经理准备的基于Vue2.0的组件库。 ... 查看详情
从零开始搭建vue+element-ui后台管理系统项目到上线(代码片段)
...言之前有些过移动端的项目搭建的文章，感觉不写个pc端管理系统老感觉少了点什么，最近公司项目比较多，恰巧要做一个申报系统的后台管理系统，鉴于对vue技术栈比较熟悉，所以考虑还是使用vue技术栈来做；看过一个不错的... 查看详情
vue+element-ui实现分页效果(代码片段)
...就需要使用分页功能来去完成了。1.本次所使用的是vue2.0+element-ui实现一个分页功能，element-ui这个组件特别丰富，分页中给我提供了一个Pagination 分页，使用Pagination快速完成分页功能 最终效果展示<divclass 查看详情
vue+element-ui+slot-scope或原生实现可编辑表格(日历)(代码片段)
...，大牛一般喜欢封装组件框架。2.思路可编辑表格在后台管理系统还是比较常用的，因为比较流行框架element,iview都没有这个应用,所以考虑了两种方法，下面我简单说哈我的两种方法：3.方法一:直接通过element的table组件中的cell-cli... 查看详情
vue后台管理系统模板(代码片段)
推荐一些Vue常用后台管理系统模板前言Vue.js是一个目前比较流行的前端框架，已经到了前端人人都会的地步，今天这里为大家罗列一下基于Vue的后端管理的框架。目前比较流行和Vue搭配的UI组件有Element-UI、iview、Bootstrap-Vu... 查看详情
springboot+vue+elementui实现后台管理系统模板--后端篇：数据表设计使用jwtredissms工具类完善注册登录逻辑(代码片段)
（1）相关博文地址：SpringBoot+Vue+ElementUI实现后台管理系统模板--前端篇（一）：搭建基本环境：https://www.cnblogs.com/l-y-h/p/12930895.htmlSpringBoot+Vue+ElementUI实现后台管理系统模板--前端篇（二）：引入element-ui定义基本页面显示：https://w... 查看详情
vue如何循环渲染element-ui中table内容(代码片段)
对于大多数前端开发者来说，vuejs+element-ui是开发后台管理系统过程中必不可少的技术框架。而后台管理系统中，最常见的形式就是表格和表单，以便用来增删改查。element-ui中table的使用——当el-table元素中注入data对象数组... 查看详情
电商后台管理项目d01(代码片段)
电商后台管理项目d011、项目技术栈2、项目初始化3、`Element-UI`的按需引入。4、路由配置：5、`Axios`的封装6、实现登录功能7、完成首页部分8、用户管理用户列表9、权限管理1、角色管理4、权限列表1、项目技术栈VueVue-RouterElement-UI... 查看详情
laravel+vue+element-ui前端项目一vue实现查看更多5(代码片段)
阅读目录预览Vue源码Vue添加代码部分Laravel后台Vue涉及页面源码E:\\pdf1\\cg\\src\\main.jsE:\\pdf1\\cg\\src\\components\\ViewMore.vueE:\\pdf1\\cg\\src\\components\\NavMenu.vue预览Vue源码Vue添加代码部分E:\\pdf1\\cg\\src\\main.js引入路由impor 查看详情
关于element-ui表格的使用
关于element-ui表格使用的一些方法最近在用Vue.js和elment-ui做一个后台管理项目,不得不说element功能非常强大,提供了许多组件,基本可以满足一些基础的开发了.因为我做的后台系统,里面表格用到比较多,但是其实我也只是一... 查看详情
vue中的element-ui和react的element-ui
首先分享一个使用vue做的后台管理系统网站的示例，里面的控件都是用element-ui做的。https://cangdu.org/manage/#/读了一下它的源代码，深感有了element-ui做UI太方便了，Android里做UI是多么的麻烦。这里记录一下element-ui的官方... 查看详情
vue中的element-ui和react的element-ui
首先分享一个使用vue做的后台管理系统网站的示例，里面的控件都是用element-ui做的。https://cangdu.org/manage/#/读了一下它的源代码，深感有了element-ui做UI太方便了，Android里做UI是多么的麻烦。这里记录一下element-ui的官方... 查看详情