vue+element对常用表格的简单封装
在后台管理和中台项目中, table是使用率是特别的高的, 虽然element已经有table组件, 但是分页和其他各项操作还是要写一堆的代码, 所以就在原有的基础上做了进一步的封装
所涵盖的功能有: 内容展示
, 操作栏
, 选择框
, 分页
, 图片渲染
, 开关
, 过滤器(时间格式化)
直接上代码
组件:
<template>
<div class="hello">
<el-table
:data="tableData"
style="width: 98%"
@selection-change="handleSelectionChange"
border>
<el-table-column v-if="type=='checkbox'" label="选择">
<template slot-scope="{ row }">
<el-checkbox v-model="row.isChecked" @change="handleChecked(row)"></el-checkbox>
</template>
</el-table-column>
<el-table-column v-if="type=='selection'" :reserve-selection="true" type="selection" width="55" />
<el-table-column v-if="type=='index'" type="index" label="序号" width="55" />
<template v-for="(item, index) of tableTitle">
<el-table-column
:prop="item.prop"
:label="item.label"
:key="index"
:min-width="item.width"
>
<template slot-scope="{ row, $index }" style="height: 100%;">
<span v-if="item.filter == 'date'">
{{ row[item.prop] | dateFilter }}
</span>
<span v-else-if="item.filter == 'time'">
{{ row[item.prop] | timeFilter }}
</span>
<span v-else-if="item.filter == 'image' && row[item.prop]">
<img :src="row[item.prop]" alt="" style="height: 45px;">
</span>
<span v-else-if="item.filter == 'switch'">
<el-switch
v-model="row[item.prop]"
@change="change(row, $index)"
/>
</span>
<span v-else>
{{ row[item.prop] }}
</span>
</template>
</el-table-column>
</template>
<!-- 插槽: 操作-->
<el-table-column label="操作" v-if="ishandle" :width="handleWidth">
<template slot-scope="scope">
<slot name="handle" :row="scope.row" :index="scope.$index"></slot>
</template>
</el-table-column>
</el-table>
<el-pagination
background
layout="total, sizes, prev, pager, next, jumper"
:total="total"
:page-size="pageSize"
:current-page.sync="current"
:page-sizes="[10, 20, 30, 40, 50, 100]"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
>
</el-pagination>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
props: {
handleWidth: { // 操作宽度
default: 200
},
ishandle: { // 是否有操作按钮
type: Boolean,
default: true
},
type: String, // 单选/多选/或值展示
tableTitle: Array, // 表头
tableData: Array, // 数据
},
data () {
return {
total: 1000,
pageSize: 10,
current: 1
}
},
methods: {
handleSizeChange (size) { // 改变每页数量
this.pageSize = size
this.$emit('handleChange', this.pageSize, this.current)
},
handleChecked (row) { // 单选
if (row.isChecked) {
this.tableData.map(item => {
if (item.id != row.id) {
this.$set(item, 'isChecked', false)
}
})
this.$emit('handleChecked', row)
} else {
this.$emit('handleChecked', '', row)
}
},
handleSelectionChange (row) { // 多选
this.$emit('handleChecked', row)
},
handleCurrentChange (current) { //换页
this.current = current
this.$emit('handleChange', this.pageSize, this.current)
},
change (row, index) { // 切换开关
this.$emit('handleSwitch', row, index)
},
}
}
</script>
<style scoped lang="scss">
</style>
在父组件中调用:
<template>
<div class="home">
<ComTable
:handleWidth="200"
:tableTitle="tableTitle"
:tableData="tableData"
@handleChange="handleChange"
@handleSwitch="handleSwitch"
@handleChecked="handleChecked"
>
<template slot="handle" slot-scope="scope">
<el-button type="text" size="small">编辑{{scope.index}}</el-button>
</template>
</ComTable>
</div>
</template>
<script>
import ComTable from '@/components/Com_Table.vue'
export default {
name: 'Home',
components: {
ComTable
},
data () {
return {
tableTitle: [{
prop: 'name',
label: '姓名',
width: '200',
},{
prop: 'sex',
label: '性别',
width: '200',
filter: 'switch',
},{
prop: 'url',
label: '头像',
width: '200',
filter: 'image',
},{
prop: 'date',
label: '出生日期',
width: '200',
filter: 'date'
},],
tableData: [{
id: 1,
name: '张三',
sex: true,
url: 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3202059567,1723387850&fm=26&gp=0.jpg',
date: new Date()
},{
id: 2,
name: '张三',
sex: true,
url: 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3202059567,1723387850&fm=26&gp=0.jpg',
date: new Date()
},{
id: 3,
name: '张三',
sex: true,
url: 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3202059567,1723387850&fm=26&gp=0.jpg',
date: new Date()
},{
id: 4,
name: '张三',
sex: true,
url: 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3202059567,1723387850&fm=26&gp=0.jpg',
date: new Date()
},],
}
},
mounted() {
},
methods: {
handleChange (size, current) {
// 分页改变时的回调---- size: 每页的数量 current: 第几页
console.log(size, current, 'tableData')
},
handleSwitch (row, index) {
// 切换开关时的回调-======== this.tableData: 滑块值改变后的数据.row: 当前行数据 index: 当前行的索引
console.log(this.tableData, '--tableData---', row, index)
},
handleChecked (val) {
// 勾选时的回调---- val: 选中的数据 多选是val是数组, 单选时是对象
console.log(val, 'val===')
}
}
}
</script>
组件中有使用过滤器, 可以定义一下全家的过滤器,然后引入, 这里要根据自己的文件来进行调整. 送上我这里用的两个过滤器
// 注册全局的过滤器 {{ msg | dateFilter }}
import Vue from 'vue'
import moment from 'moment'
// 展示日期格式: YYYY-MM-DD
Vue.filter('dateFilter', function (dataStr, pattern = 'YYYY-MM-DD') {
if (dataStr) {
return moment(dataStr).format(pattern)
} else {
return dataStr
}
})
// 展示日期格式: YYYY-MM-DD HH:mm:ss
Vue.filter('timeFilter', function (dataStr, pattern = 'YYYY-MM-DD HH:mm:ss') {
if (dataStr) {
return moment(dataStr).format(pattern)
} else {
return dataStr
}
})
下面是相关参数的说明:
type: 表格类型. 非必传. 值: selection(多选) / checkbox(单选) 类型: string /index:序号1.2.3...
handleWidth: 操作栏宽度 非必传 默认200
tableTitle: 表头. 必传. 类型: 数组 例:
tableTitle: [{
prop: 'name', 绑定的字段
label: '姓名', 表头名称
width: '200', 列宽度
filter: 'date' 过滤器. 需要展示的类型. 非必传. 值:
date: 日期格式(YYYY-MM-DD)
time: 时间格式(YYYY-MM-DD : HH:mm:ss)
image: 图片
}]
> tableData: 要展示的数据. 必传 类型: array 例:
插槽:
slot="handle": handle: 插槽名称
slot-scope="scope": scope: 组件传递给插槽的值 scope.row: 当前行的内容 scope.index: 当前行的索引
事件:
handleChange (size, current) {}, //分页改变时的回调---- size: 每页的数量 current: 第几页
handleSwitch (row, index) {}, // 切换开关时的回调-======== this.tableData: 滑块值改变后的数据.row: 当前行数据 index: 当前行的索引
handleChecked (val) {}, // 勾选时的回调---- val: 选中的数据 多选是val是数组, 单选时是对象
封装并不是很全面很精致, 但是至少可以省点事~~~
以上代码还未经过项目的检验, 属于雏形, 还需要不断的优化和改进, 如遇坑, 请留言. 谢谢!!!
vue+element对常用表格的简单封装的更多相关文章
- vue + element ui table表格二次封装 常用功能
因为在做后台管理项目的时候用到了大量的表格, 且功能大多相同,因此封装了一些常用的功能, 方便多次复用. 组件封装代码: <template> <el-table :data=&qu ...
- vue+element ui 的表格列使用组件
前言:工作中用到 vue+element ui 的前端框架,有这个场景:很多表格的列有许多一样的,所以考虑将列封装为组件.转载请注明出处:https://www.cnblogs.com/yuxiaol ...
- 封装Vue Element的table表格组件
上周分享了几篇关于React组件封装方面的博文,这周就来分享几篇关于Vue组件封装方面的博文,也好让大家能更好地了解React和Vue在组件封装方面的区别. 在封装Vue组件时,我依旧会交叉使用函数式 ...
- Vue+element UI实现表格数据导出Excel组件
介绍 这是一个可以将页面中的表格数据导出为Excel文件的功能组件,该组件一般与表格一起使用,将表格数据传给组件,然后通过点击组件按钮可将表格中的数据导出成Excel文件. 使用方法 由于封装该组件内 ...
- vue element UI el-table 表格调整行高的处理方法
这是我在工作项目中遇到的问题,我想将标记处下方的表格高度调低一点,也就是想实现下面的这个效果: 代码调整如下: 说明: 缩小:行高到一定程度之后便不能缩小. 好像最小35px.各位可以试一下. 升高: ...
- vue+element 实现在表格内插入其他组件,每行数据独立存储
使用 v-slot row代表当前行
- 封装Vue Element的可编辑table表格组件
前一段时间,有博友在我那篇封装Vue Element的table表格组件的博文下边留言说有没有那种"表格行内编辑"的封装组件,我当时说我没有封装过这样的组件,因为一直以来在实际开发 ...
- 封装Vue Element的form表单组件
前两天封装了一个基于vue和Element的table表格组件,阅读的人还是很多的,看来大家都是很认同组件化.高复用这种开发模式的,毕竟开发效率高,代码优雅,逼格高嘛.虽然这两天我的心情很糟糕,就像& ...
- Element ui结合springboot的简单实战
Eelment UI简单实战 前端开发 1 创建项目,导入element ui(略) 2 大致设计出想要的效果,如下 3 创建包 根据设计的大致模样在项目的components中创建对应的包,方便以后 ...
随机推荐
- C++基础入门知识:C++命名空间(名字空间)详解
一个中大型软件往往由多名程序员共同开发,会使用大量的变量和函数,不可避免地会出现变量或函数的命名冲突.当所有人的代码都测试通过,没有问题时,将它们结合到一起就有可能会出现命名冲突. 例如小李和小韩都参 ...
- 痞子衡嵌入式:一个奇怪的Keil MDK下变量链接强制对齐报错问题(--legacyalign)
大家好,我是痞子衡,是正经搞技术的痞子.今天痞子衡给大家分享的是一个奇怪的Keil MDK下变量链接强制对齐报错问题. 痞子衡最近一直在参与恩智浦SBL项目(就是一个适用LPC和i.MXRT的完整OT ...
- 三万字无坑搭建基于Docker+K8S+GitLab/SVN+Jenkins+Harbor持续集成交付环境
写在前面 最近在 K8S 1.18.2 版本的集群上搭建DevOps环境,期间遇到了各种坑.目前,搭建环境的过程中出现的各种坑均已被填平,特此记录,并分享给大家! 文章和搭建环境所需要的yml文件已收 ...
- 简单RTSCamera实现
using System.Collections; using System.Collections.Generic; using UnityEngine; public class TopCamer ...
- model基础操作
url.py from django.contrib import admin from django.urls import path,include from app1.views import ...
- day8(使用celery异步发送短信)
1.1在celery_task/mian.py中添加发送短信函数 # celery项目中的所有导包地址, 都是以CELERY_BASE_DIR为基准设定. # 执行celery命令时, 也需要进入CE ...
- 冰河开源了全网首个完全开源的分布式全局有序序列号(分布式ID)框架!!
写在前面 mykit-serial框架的设计参考了李艳鹏大佬开源的vesta框架,并彻底重构了vesta框架,借鉴了雪花算法(SnowFlake)的思想,并在此基础上进行了全面升级和优化.支持嵌入式( ...
- 敏捷开发(Scrum)与敏捷测试
1.敏捷测试流程和传统测试流程 软件测试是贯穿整个软件开发生命周期.对软件产品(包括阶段性产品)进行验证和确认的活动过程,也是对软件产品质量持续的评估过程,其目的是尽快尽早地发现在软件产品(包括阶段性 ...
- (四)一个bug的生命周期
Bug的属性 Bug重现环境 这个应该是我们重现BUG的一个前提,如果没有这个前提,我们可能会无法重现问题,或者根本就无从下手. • 操作系统 这个是一般软件运行的一大前提,基本上所有的软件都依赖于操 ...
- REHの个人主页
朝暮与年岁并往 然后与你一同行至天光. 简介 这是怎么做到的啊-- 把那些迷茫的浑浊的不可预知的,裁剪,变化,像个造物主一样,最终成为混沌而又分明的,除去一身的戾气和险恶,把那些复杂和晦涩都剖析成它精 ...