在后台管理和中台项目中, table是使用率是特别的高的, 虽然element已经有table组件, 但是分页和其他各项操作还是要写一堆的代码, 所以就在原有的基础上做了进一步的封装

所涵盖的功能有: 内容展示 , 操作栏 , 选择框 , 分页 , 图片渲染 , 开关 , 过滤器(时间格式化)

直接上代码

组件:

  1. <template>
  2. <div class="hello">
  3. <el-table
  4. :data="tableData"
  5. style="width: 98%"
  6. @selection-change="handleSelectionChange"
  7. border>
  8. <el-table-column v-if="type=='checkbox'" label="选择">
  9. <template slot-scope="{ row }">
  10. <el-checkbox v-model="row.isChecked" @change="handleChecked(row)"></el-checkbox>
  11. </template>
  12. </el-table-column>
  13. <el-table-column v-if="type=='selection'" :reserve-selection="true" type="selection" width="55" />
  14. <el-table-column v-if="type=='index'" type="index" label="序号" width="55" />
  15. <template v-for="(item, index) of tableTitle">
  16. <el-table-column
  17. :prop="item.prop"
  18. :label="item.label"
  19. :key="index"
  20. :min-width="item.width"
  21. >
  22. <template slot-scope="{ row, $index }" style="height: 100%;">
  23. <span v-if="item.filter == 'date'">
  24. {{ row[item.prop] | dateFilter }}
  25. </span>
  26. <span v-else-if="item.filter == 'time'">
  27. {{ row[item.prop] | timeFilter }}
  28. </span>
  29. <span v-else-if="item.filter == 'image' && row[item.prop]">
  30. <img :src="row[item.prop]" alt="" style="height: 45px;">
  31. </span>
  32. <span v-else-if="item.filter == 'switch'">
  33. <el-switch
  34. v-model="row[item.prop]"
  35. @change="change(row, $index)"
  36. />
  37. </span>
  38. <span v-else>
  39. {{ row[item.prop] }}
  40. </span>
  41. </template>
  42. </el-table-column>
  43. </template>
  44. <!-- 插槽: 操作-->
  45. <el-table-column label="操作" v-if="ishandle" :width="handleWidth">
  46. <template slot-scope="scope">
  47. <slot name="handle" :row="scope.row" :index="scope.$index"></slot>
  48. </template>
  49. </el-table-column>
  50. </el-table>
  51. <el-pagination
  52. background
  53. layout="total, sizes, prev, pager, next, jumper"
  54. :total="total"
  55. :page-size="pageSize"
  56. :current-page.sync="current"
  57. :page-sizes="[10, 20, 30, 40, 50, 100]"
  58. @size-change="handleSizeChange"
  59. @current-change="handleCurrentChange"
  60. >
  61. </el-pagination>
  62. </div>
  63. </template>
  64. <script>
  65. export default {
  66. name: 'HelloWorld',
  67. props: {
  68. handleWidth: { // 操作宽度
  69. default: 200
  70. },
  71. ishandle: { // 是否有操作按钮
  72. type: Boolean,
  73. default: true
  74. },
  75. type: String, // 单选/多选/或值展示
  76. tableTitle: Array, // 表头
  77. tableData: Array, // 数据
  78. },
  79. data () {
  80. return {
  81. total: 1000,
  82. pageSize: 10,
  83. current: 1
  84. }
  85. },
  86. methods: {
  87. handleSizeChange (size) { // 改变每页数量
  88. this.pageSize = size
  89. this.$emit('handleChange', this.pageSize, this.current)
  90. },
  91. handleChecked (row) { // 单选
  92. if (row.isChecked) {
  93. this.tableData.map(item => {
  94. if (item.id != row.id) {
  95. this.$set(item, 'isChecked', false)
  96. }
  97. })
  98. this.$emit('handleChecked', row)
  99. } else {
  100. this.$emit('handleChecked', '', row)
  101. }
  102. },
  103. handleSelectionChange (row) { // 多选
  104. this.$emit('handleChecked', row)
  105. },
  106. handleCurrentChange (current) { //换页
  107. this.current = current
  108. this.$emit('handleChange', this.pageSize, this.current)
  109. },
  110. change (row, index) { // 切换开关
  111. this.$emit('handleSwitch', row, index)
  112. },
  113. }
  114. }
  115. </script>
  116. <style scoped lang="scss">
  117. </style>

在父组件中调用:

  1. <template>
  2. <div class="home">
  3. <ComTable
  4. :handleWidth="200"
  5. :tableTitle="tableTitle"
  6. :tableData="tableData"
  7. @handleChange="handleChange"
  8. @handleSwitch="handleSwitch"
  9. @handleChecked="handleChecked"
  10. >
  11. <template slot="handle" slot-scope="scope">
  12. <el-button type="text" size="small">编辑{{scope.index}}</el-button>
  13. </template>
  14. </ComTable>
  15. </div>
  16. </template>
  17. <script>
  18. import ComTable from '@/components/Com_Table.vue'
  19. export default {
  20. name: 'Home',
  21. components: {
  22. ComTable
  23. },
  24. data () {
  25. return {
  26. tableTitle: [{
  27. prop: 'name',
  28. label: '姓名',
  29. width: '200',
  30. },{
  31. prop: 'sex',
  32. label: '性别',
  33. width: '200',
  34. filter: 'switch',
  35. },{
  36. prop: 'url',
  37. label: '头像',
  38. width: '200',
  39. filter: 'image',
  40. },{
  41. prop: 'date',
  42. label: '出生日期',
  43. width: '200',
  44. filter: 'date'
  45. },],
  46. tableData: [{
  47. id: 1,
  48. name: '张三',
  49. sex: true,
  50. url: 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3202059567,1723387850&fm=26&gp=0.jpg',
  51. date: new Date()
  52. },{
  53. id: 2,
  54. name: '张三',
  55. sex: true,
  56. url: 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3202059567,1723387850&fm=26&gp=0.jpg',
  57. date: new Date()
  58. },{
  59. id: 3,
  60. name: '张三',
  61. sex: true,
  62. url: 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3202059567,1723387850&fm=26&gp=0.jpg',
  63. date: new Date()
  64. },{
  65. id: 4,
  66. name: '张三',
  67. sex: true,
  68. url: 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3202059567,1723387850&fm=26&gp=0.jpg',
  69. date: new Date()
  70. },],
  71. }
  72. },
  73. mounted() {
  74. },
  75. methods: {
  76. handleChange (size, current) {
  77. // 分页改变时的回调---- size: 每页的数量 current: 第几页
  78. console.log(size, current, 'tableData')
  79. },
  80. handleSwitch (row, index) {
  81. // 切换开关时的回调-======== this.tableData: 滑块值改变后的数据.row: 当前行数据 index: 当前行的索引
  82. console.log(this.tableData, '--tableData---', row, index)
  83. },
  84. handleChecked (val) {
  85. // 勾选时的回调---- val: 选中的数据 多选是val是数组, 单选时是对象
  86. console.log(val, 'val===')
  87. }
  88. }
  89. }
  90. </script>

组件中有使用过滤器, 可以定义一下全家的过滤器,然后引入, 这里要根据自己的文件来进行调整. 送上我这里用的两个过滤器

  1. // 注册全局的过滤器 {{ msg | dateFilter }}
  2. import Vue from 'vue'
  3. import moment from 'moment'
  4. // 展示日期格式: YYYY-MM-DD
  5. Vue.filter('dateFilter', function (dataStr, pattern = 'YYYY-MM-DD') {
  6. if (dataStr) {
  7. return moment(dataStr).format(pattern)
  8. } else {
  9. return dataStr
  10. }
  11. })
  12. // 展示日期格式: YYYY-MM-DD HH:mm:ss
  13. Vue.filter('timeFilter', function (dataStr, pattern = 'YYYY-MM-DD HH:mm:ss') {
  14. if (dataStr) {
  15. return moment(dataStr).format(pattern)
  16. } else {
  17. return dataStr
  18. }
  19. })

下面是相关参数的说明:

type: 表格类型. 非必传. 值: selection(多选) / checkbox(单选) 类型: string /index:序号1.2.3...

  1. handleWidth: 操作栏宽度 非必传 默认200
  2. tableTitle: 表头. 必传. 类型: 数组 例:
  3. tableTitle: [{
  4. prop: 'name', 绑定的字段
  5. label: '姓名', 表头名称
  6. width: '200', 列宽度
  7. filter: 'date' 过滤器. 需要展示的类型. 非必传. 值:
  8. date: 日期格式(YYYY-MM-DD)
  9. time: 时间格式(YYYY-MM-DD : HH:mm:ss)
  10. image: 图片
  11. }]
  12. > tableData: 要展示的数据. 必传 类型: array 例:

插槽:

  1. slot="handle": handle: 插槽名称
  2. slot-scope="scope": scope: 组件传递给插槽的值 scope.row: 当前行的内容 scope.index: 当前行的索引

事件:

  1. handleChange (size, current) {}, //分页改变时的回调---- size: 每页的数量 current: 第几页
  2. handleSwitch (row, index) {}, // 切换开关时的回调-======== this.tableData: 滑块值改变后的数据.row: 当前行数据 index: 当前行的索引
  3. handleChecked (val) {}, // 勾选时的回调---- val: 选中的数据 多选是val是数组, 单选时是对象

封装并不是很全面很精致, 但是至少可以省点事~~~

以上代码还未经过项目的检验, 属于雏形, 还需要不断的优化和改进, 如遇坑, 请留言. 谢谢!!!

vue+element对常用表格的简单封装的更多相关文章

  1. vue + element ui table表格二次封装 常用功能

    因为在做后台管理项目的时候用到了大量的表格, 且功能大多相同,因此封装了一些常用的功能, 方便多次复用. 组件封装代码: <template> <el-table :data=&qu ...

  2. vue+element ui 的表格列使用组件

    前言:工作中用到 vue+element ui 的前端框架,有这个场景:很多表格的列有许多一样的,所以考虑将列封装为组件.转载请注明出处:https://www.cnblogs.com/yuxiaol ...

  3. 封装Vue Element的table表格组件

    上周分享了几篇关于React组件封装方面的博文,这周就来分享几篇关于Vue组件封装方面的博文,也好让大家能更好地了解React和Vue在组件封装方面的区别. 在封装Vue组件时,我依旧会交叉使用函数式 ...

  4. Vue+element UI实现表格数据导出Excel组件

    介绍 这是一个可以将页面中的表格数据导出为Excel文件的功能组件,该组件一般与表格一起使用,将表格数据传给组件,然后通过点击组件按钮可将表格中的数据导出成Excel文件. 使用方法 由于封装该组件内 ...

  5. vue element UI el-table 表格调整行高的处理方法

    这是我在工作项目中遇到的问题,我想将标记处下方的表格高度调低一点,也就是想实现下面的这个效果: 代码调整如下: 说明: 缩小:行高到一定程度之后便不能缩小. 好像最小35px.各位可以试一下. 升高: ...

  6. vue+element 实现在表格内插入其他组件,每行数据独立存储

    使用  v-slot row代表当前行

  7. 封装Vue Element的可编辑table表格组件

    前一段时间,有博友在我那篇封装Vue Element的table表格组件的博文下边留言说有没有那种"表格行内编辑"的封装组件,我当时说我没有封装过这样的组件,因为一直以来在实际开发 ...

  8. 封装Vue Element的form表单组件

    前两天封装了一个基于vue和Element的table表格组件,阅读的人还是很多的,看来大家都是很认同组件化.高复用这种开发模式的,毕竟开发效率高,代码优雅,逼格高嘛.虽然这两天我的心情很糟糕,就像& ...

  9. Element ui结合springboot的简单实战

    Eelment UI简单实战 前端开发 1 创建项目,导入element ui(略) 2 大致设计出想要的效果,如下 3 创建包 根据设计的大致模样在项目的components中创建对应的包,方便以后 ...

随机推荐

  1. C++基础入门知识:C++命名空间(名字空间)详解

    一个中大型软件往往由多名程序员共同开发,会使用大量的变量和函数,不可避免地会出现变量或函数的命名冲突.当所有人的代码都测试通过,没有问题时,将它们结合到一起就有可能会出现命名冲突. 例如小李和小韩都参 ...

  2. 痞子衡嵌入式:一个奇怪的Keil MDK下变量链接强制对齐报错问题(--legacyalign)

    大家好,我是痞子衡,是正经搞技术的痞子.今天痞子衡给大家分享的是一个奇怪的Keil MDK下变量链接强制对齐报错问题. 痞子衡最近一直在参与恩智浦SBL项目(就是一个适用LPC和i.MXRT的完整OT ...

  3. 三万字无坑搭建基于Docker+K8S+GitLab/SVN+Jenkins+Harbor持续集成交付环境

    写在前面 最近在 K8S 1.18.2 版本的集群上搭建DevOps环境,期间遇到了各种坑.目前,搭建环境的过程中出现的各种坑均已被填平,特此记录,并分享给大家! 文章和搭建环境所需要的yml文件已收 ...

  4. 简单RTSCamera实现

    using System.Collections; using System.Collections.Generic; using UnityEngine; public class TopCamer ...

  5. model基础操作

    url.py from django.contrib import admin from django.urls import path,include from app1.views import ...

  6. day8(使用celery异步发送短信)

    1.1在celery_task/mian.py中添加发送短信函数 # celery项目中的所有导包地址, 都是以CELERY_BASE_DIR为基准设定. # 执行celery命令时, 也需要进入CE ...

  7. 冰河开源了全网首个完全开源的分布式全局有序序列号(分布式ID)框架!!

    写在前面 mykit-serial框架的设计参考了李艳鹏大佬开源的vesta框架,并彻底重构了vesta框架,借鉴了雪花算法(SnowFlake)的思想,并在此基础上进行了全面升级和优化.支持嵌入式( ...

  8. 敏捷开发(Scrum)与敏捷测试

    1.敏捷测试流程和传统测试流程 软件测试是贯穿整个软件开发生命周期.对软件产品(包括阶段性产品)进行验证和确认的活动过程,也是对软件产品质量持续的评估过程,其目的是尽快尽早地发现在软件产品(包括阶段性 ...

  9. (四)一个bug的生命周期

    Bug的属性 Bug重现环境 这个应该是我们重现BUG的一个前提,如果没有这个前提,我们可能会无法重现问题,或者根本就无从下手. • 操作系统 这个是一般软件运行的一大前提,基本上所有的软件都依赖于操 ...

  10. REHの个人主页

    朝暮与年岁并往 然后与你一同行至天光. 简介 这是怎么做到的啊-- 把那些迷茫的浑浊的不可预知的,裁剪,变化,像个造物主一样,最终成为混沌而又分明的,除去一身的戾气和险恶,把那些复杂和晦涩都剖析成它精 ...