在后台管理和中台项目中, 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语言实现万年历

    题目要求 编程实现万年历,要求: 可根据用户输入或系统日期进行初始化,如果用户无输入则显示系统日期所在月份的月历,并突出显示当前日期: 可根据用户输入的日期查询,并显示查询结果所在月份的月历,突出显示 ...

  2. C语言入门最后一阶,掌握这门知识,你就进入提高阶段~

    哈喽,伙伴们,我们前面讲了C语言的发展史,基本数据类型,变量与常量,表达式,基本结构等等,今天是作为C语言基础入门的最后一个阶段:输入与输出. 以上这些知识你能够掌握好,就可以开始进入C语言的进阶提高 ...

  3. 在EXCEL带有字母的数字下拉如何能自动排序

    在excel中0,1,2,3,4,5,6,7,8,9会自动排序,a,b,c,d,e,f,g.....会自动排序,所以可以分布来实现. 例如排序:fish1a.png,fish1b.png,fish1c ...

  4. HTML-webstorm添加快捷键

    快速输入标签: 先输入标签p,按Tab键变成<p></p>,光标会在标签中间 输入内容后按end键 快速复制粘贴光标所在的一整行内容Ctrl+D 快速删除光标所在的行 Ctrl ...

  5. 分享篇:聊一聊 15.5K 的 FileSaver,是如何工作的?

    聊一聊 15.5K 的 FileSaver,是如何工作的? FileSaver.js 是在客户端保存文件的解决方案,非常适合在客户端上生成文件的 Web 应用程序.它简单易用且兼容大多数浏览器,被作为 ...

  6. 【入门】ZooKeeper 相关概念总结

    1. 前言 相信大家对 ZooKeeper 应该不算陌生.但是你真的了解 ZooKeeper 到底有啥用不?如果别人/面试官让你给他讲讲对于 ZooKeeper 的认识,你能回答到什么地步呢? 拿我自 ...

  7. PyQt(Python+Qt)学习随笔:QDateTimeEdit日期时间编辑部件

    专栏:Python基础教程目录 专栏:使用PyQt开发图形界面Python应用 专栏:PyQt入门学习 老猿Python博文目录 老猿学5G博文目录 Designer输入部件中,Date/Time E ...

  8. PyQt(Python+Qt)学习随笔:print标准输出sys.stdout以及stderr重定向QTextBrowser等图形界面对象

    专栏:Python基础教程目录 专栏:使用PyQt开发图形界面Python应用 专栏:PyQt入门学习 老猿Python博文目录 <在Python实现print标准输出sys.stdout.st ...

  9. PyQt学习随笔:应用中通过installEventFilter安装重写的eventFilter捕获应用事件的方法

    eventFilter函数是直接从QObject继承的定义的事件刷选虚拟函数,如果一个对象A使用installEventFilter函数将另一个对象B安装了B的实例方法eventFilter,则这个对 ...

  10. python调用jar包

    工作项目中用jmeter做接口测试,想尝试用python写接口测试(练习下python), 接口中好多字段都需要加密,而加密方法是java开发写的,打的jar包,这就需要考虑python调用java: ...