侯体宗的博客
  • 首页
  • Hyperf版
  • beego仿版
  • 人生(杂谈)
  • 技术
  • 关于我
  • 更多分类
    • 文件下载
    • 文字修仙
    • 中国象棋ai
    • 群聊
    • 九宫格抽奖
    • 拼图
    • 消消乐
    • 相册

vue项目中将element-ui table表格写成组件的实现代码

前端  /  管理员 发布于 4年前   629

表格中我们经常需要动态加载数据, 如果有多个页面都需要用到表格, 那我希望可以有个组件, 只传数据过去显示, 不用每个页面都去写这么一段内容:

                              

 上面这段代码是一个element-ui中tabele表格的形式,这里表头都是已经固定的, 如果每个页面都写上这么一段, 不同的是表头名字和字段,这样子就有点重复,而且页面的篇幅也就比较大了,于是把这块写成一个组件, 每个页面引入这个组件, 再传入数据。

  1.  表格组件:

•首先  table.vue 组件可以这样写:

                      
// 这里是传入的数据 props: {  tableData: {   type: Array,   default: function () {    return []   }  },  rowDblclick: {   type: Function,   default: (row, event, column) => { console.log('default: ' + row + '---' + event + '---' + column) }  },  tableHeader: {   type: Array,   default: function () {    return []   }  },  loading: {   type: Boolean,   default: false  } },

• 然后在其他组件中就可以引入table组件, 将数据传给table显示

 

    其中 tableData是表格中要显示的数据内容, 这个内容我的是从后台查询出来的, rowDblclick 是双击一行做的操作,如果不需要可以删除, tableHeader 是表头显示的数据, loading 是表格加载的loading方式, 默认是没有的

  表头数据格式如下: formatData 是表格里面的数据需要做处理的方法, oper是操作列,查看和编辑是两个按钮,handleClick和editClick点击按钮的方法, 自行补充。

export const tableHeader = [ // 表头数据 { prop: 'dhm', label: '时间', minWidth: '140px' }, { prop: 'plazano', label: '编码', minWidth: '100px' }, { prop: 'plazano', label: '名称', minWidth: '100px', formatData: val => store.getters.allPlazano2Map.get(val) }, { prop: 'car_plate', label: '号码' }, { prop: 'card_no', label: '卡号', minWidth: "120px" }, { prop: 'laneno', label: '数据类型', formatData: function(val) { return val.substr(2, 1) == '1' ? '出口' : '入口' } }, { prop: 'staffname', label: '姓名', minWidth: '100px' }, { prop: 'mediatype', label: '付款方式' }, { prop: 'comp_cash', label: '计算费额' }, { prop: 'fact_cash', label: '实收费额' }, { prop: 'oper', label: '操作', fixed: 'right', minWidth: '140px',  oper: [   { name: '查看', clickFun: handleClick },   { name: '编辑', clickFun: editClick }  ] }]

现在的代码可能会报错, 下面这处的代码是在全局注册了一个过滤器,如果不注册就找不到这个方法就会报错,所以还需要注册一个全局过滤器,如果你不需要对数据做处理可以不要这个过滤器

  2.  注册全局过滤器, 我的是这样写的, 先新建个文件 filter.js 然后在里面写个方法, export 出去

export function formatters(val, format) {  if (typeof (format) === 'function') {   return format(val)  } else return val}

  然后再在main.js中引入进来注册全局的过滤器:

import * as filters from './filters'Object.keys(filters).forEach(key => {  Vue.filter(key, filters[key])})

  这个在每个页面就都可以使用 formatters 这个过滤器方法了, 不过具体的过滤方法是由 format 这个参数传进去的, 这里主要是因为不同的数据过滤的方法不一样, 所以在表头传数据的时候就一并写上处理数据的方法

  如果很多地方都使用了同一个方法, 可以将这个方法注册成全局方法, 那么在每个页面就可以直接使用该方法, 不用重复去写。

  3.   注册全局方法

  建立个js 文件(我的文件名为validate.js), 写入该方法, 这里使用 exports.install 注册全局方法,挂载到vue原型上

exports.install = (Vue, options) => { Vue.prototype.validator = {  lanenoTransf(val) { return val.substr(2, 1) == '1' ? '出口' : '入口' } }}

   然后在main.js中引入

import validator from '@/utils/validate'Vue.use(validator)

  最后页面上就可以直接使用

{ prop: 'laneno', label: '数据类型', formatData: this.lanenoTransf },

最最后, 看我的表格:

总结

以上所述是小编给大家介绍的vue项目中将element-ui table表格写成组件的实现代码 ,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

您可能感兴趣的文章:

  • Vue动态生成表格的行和列
  • vue通过数据过滤实现表格合并
  • Vue实现数据表格合并列rowspan效果
  • vue.js中导出Excel表格的案例分析
  • vue+element 模态框表格形式的可编辑表单实现
  • VUE写一个简单的表格实例


  • 上一条:
    详解如何提升JSON.stringify()的性能
    下一条:
    JS实现点击生成UUID的方法完整实例【基于jQuery】
  • 昵称:

    邮箱:

    0条评论 (评论内容有缓存机制,请悉知!)
    最新最热
    • 分类目录
    • 人生(杂谈)
    • 技术
    • linux
    • Java
    • php
    • 框架(架构)
    • 前端
    • ThinkPHP
    • 数据库
    • 微信(小程序)
    • Laravel
    • Redis
    • Docker
    • Go
    • swoole
    • Windows
    • Python
    • 苹果(mac/ios)
    • 相关文章
    • 使用 Alpine.js 排序插件对元素进行排序(0个评论)
    • 在js中使用jszip + file-saver实现批量下载OSS文件功能示例(0个评论)
    • 在vue中实现父页面按钮显示子组件中的el-dialog效果(0个评论)
    • 使用mock-server实现模拟接口对接流程步骤(0个评论)
    • vue项目打包程序实现把项目打包成一个exe可执行程序(0个评论)
    • 近期文章
    • 在go语言中使用api.geonames.org接口实现根据国际邮政编码获取地址信息功能(1个评论)
    • 在go语言中使用github.com/signintech/gopdf实现生成pdf分页文件功能(0个评论)
    • gmail发邮件报错:534 5.7.9 Application-specific password required...解决方案(0个评论)
    • 欧盟关于强迫劳动的规定的官方举报渠道及官方举报网站(0个评论)
    • 在go语言中使用github.com/signintech/gopdf实现生成pdf文件功能(0个评论)
    • Laravel从Accel获得5700万美元A轮融资(0个评论)
    • 在go + gin中gorm实现指定搜索/区间搜索分页列表功能接口实例(0个评论)
    • 在go语言中实现IP/CIDR的ip和netmask互转及IP段形式互转及ip是否存在IP/CIDR(0个评论)
    • PHP 8.4 Alpha 1现已发布!(0个评论)
    • Laravel 11.15版本发布 - Eloquent Builder中添加的泛型(0个评论)
    • 近期评论
    • 122 在

      学历:一种延缓就业设计,生活需求下的权衡之选中评论 工作几年后,报名考研了,到现在还没认真学习备考,迷茫中。作为一名北漂互联网打工人..
    • 123 在

      Clash for Windows作者删库跑路了,github已404中评论 按理说只要你在国内,所有的流量进出都在监控范围内,不管你怎么隐藏也没用,想搞你分..
    • 原梓番博客 在

      在Laravel框架中使用模型Model分表最简单的方法中评论 好久好久都没看友情链接申请了,今天刚看,已经添加。..
    • 博主 在

      佛跳墙vpn软件不会用?上不了网?佛跳墙vpn常见问题以及解决办法中评论 @1111老铁这个不行了,可以看看近期评论的其他文章..
    • 1111 在

      佛跳墙vpn软件不会用?上不了网?佛跳墙vpn常见问题以及解决办法中评论 网站不能打开,博主百忙中能否发个APP下载链接,佛跳墙或极光..
    • 2016-10
    • 2016-11
    • 2017-06
    • 2017-07
    • 2017-08
    • 2017-09
    • 2017-10
    • 2017-11
    • 2018-03
    • 2018-04
    • 2018-05
    • 2018-06
    • 2018-09
    • 2018-11
    • 2018-12
    • 2019-02
    • 2020-03
    • 2020-04
    • 2020-05
    • 2020-06
    • 2021-04
    • 2021-05
    • 2021-07
    • 2021-08
    • 2021-09
    • 2021-10
    • 2021-11
    • 2022-08
    • 2022-09
    • 2022-10
    • 2022-11
    • 2022-12
    • 2023-01
    • 2023-02
    • 2023-03
    • 2023-04
    • 2023-05
    • 2023-06
    • 2023-07
    • 2023-09
    • 2023-10
    • 2023-11
    • 2023-12
    • 2024-01
    • 2024-02
    • 2024-03
    • 2024-04
    Top

    Copyright·© 2019 侯体宗版权所有· 粤ICP备20027696号 PHP交流群

    侯体宗的博客