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语言入门最后一阶,掌握这门知识,你就进入提高阶段~
哈喽,伙伴们,我们前面讲了C语言的发展史,基本数据类型,变量与常量,表达式,基本结构等等,今天是作为C语言基础入门的最后一个阶段:输入与输出. 以上这些知识你能够掌握好,就可以开始进入C语言的进阶提高 ...
- 在EXCEL带有字母的数字下拉如何能自动排序
在excel中0,1,2,3,4,5,6,7,8,9会自动排序,a,b,c,d,e,f,g.....会自动排序,所以可以分布来实现. 例如排序:fish1a.png,fish1b.png,fish1c ...
- HTML-webstorm添加快捷键
快速输入标签: 先输入标签p,按Tab键变成<p></p>,光标会在标签中间 输入内容后按end键 快速复制粘贴光标所在的一整行内容Ctrl+D 快速删除光标所在的行 Ctrl ...
- 分享篇:聊一聊 15.5K 的 FileSaver,是如何工作的?
聊一聊 15.5K 的 FileSaver,是如何工作的? FileSaver.js 是在客户端保存文件的解决方案,非常适合在客户端上生成文件的 Web 应用程序.它简单易用且兼容大多数浏览器,被作为 ...
- 【入门】ZooKeeper 相关概念总结
1. 前言 相信大家对 ZooKeeper 应该不算陌生.但是你真的了解 ZooKeeper 到底有啥用不?如果别人/面试官让你给他讲讲对于 ZooKeeper 的认识,你能回答到什么地步呢? 拿我自 ...
- PyQt(Python+Qt)学习随笔:QDateTimeEdit日期时间编辑部件
专栏:Python基础教程目录 专栏:使用PyQt开发图形界面Python应用 专栏:PyQt入门学习 老猿Python博文目录 老猿学5G博文目录 Designer输入部件中,Date/Time E ...
- PyQt(Python+Qt)学习随笔:print标准输出sys.stdout以及stderr重定向QTextBrowser等图形界面对象
专栏:Python基础教程目录 专栏:使用PyQt开发图形界面Python应用 专栏:PyQt入门学习 老猿Python博文目录 <在Python实现print标准输出sys.stdout.st ...
- PyQt学习随笔:应用中通过installEventFilter安装重写的eventFilter捕获应用事件的方法
eventFilter函数是直接从QObject继承的定义的事件刷选虚拟函数,如果一个对象A使用installEventFilter函数将另一个对象B安装了B的实例方法eventFilter,则这个对 ...
- python调用jar包
工作项目中用jmeter做接口测试,想尝试用python写接口测试(练习下python), 接口中好多字段都需要加密,而加密方法是java开发写的,打的jar包,这就需要考虑python调用java: ...