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


Posted in Javascript onJune 12, 2019

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

<el-table :data="tableData" border size="mini" fit highlight-current-row height="500">
  <el-table-column type="index" align="center" fixed></el-table-column>
  <el-table-column prop="DHM" min-width="140px" label="时间" align="center"></el-table-column>
  <el-table-column prop="PLAZANO" min-width="100px" label="编码" align="center"></el-table-column>
  <el-table-column prop="PLAZANAME" min-width="100px" label="名称" align="center"></el-table-column>
  <el-table-column prop="CAR_PLATE" label="号码" align="center"></el-table-column>
  <el-table-column prop="CARD_NO" min-width="120px" label="卡号" align="center"></el-table-column>
  <el-table-column prop="DATATYPE" label="数据类型" align="center" :formatter="formatDATATYPE"></el-table-column>
  <el-table-column prop="STAFFNAME" min-width="100px" label="姓名" align="center"></el-table-column>
  <el-table-column prop="MEDIATYPE" label="付款方式" align="center"></el-table-column>
  <el-table-column prop="COMP_CASH" label="计算费额" align="center"></el-table-column>
  <el-table-column prop="FACT_CASH" label="实收费额" align="center"></el-table-column>
  <el-table-column label="操作" min-width="140px" align="center">
    <template slot-scope="scope">
     <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
     <el-button type="text" size="small">编辑</el-button>
    </template>
  </el-table-column>
</el-table>

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

1.  表格组件:

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

<el-table :data="tableData" border size="mini" fit highlight-current-row height="500" :row-style="rowStyle" @row-dblclick="rowDblclick"
   v-loading="loading"
   element-loading-text="拼命加载中"
   element-loading-spinner="el-icon-loading"
   element-loading-background="rgba(0, 0, 0, 0.3)">
   <el-table-column type="index" align="center" fixed></el-table-column>
   <!-- prop: 字段名name, label: 展示的名称, fixed: 是否需要固定(left, right), minWidth: 设置列的最小宽度(不传默认值), oper: 是否有操作列
      oper.name: 操作列字段名称, oper.clickFun: 操作列点击事件, formatData: 格式化内容 -->
   <el-table-column v-for="(th, key) in tableHeader"
    :key="key"
    :prop="th.prop"
    :label="th.label"
    :fixed="th.fixed"
    :min-width="th.minWidth" align="center">
     <!-- 加入template主要是有操作一栏, 操作一栏的内容是相同的, 数据不是动态获取的,不过我这里操作一栏的名字定死了(oper表示是操作这一列,否则就不是) -->
     <template slot-scope="scope">
      <div v-if="th.oper">
       <el-button v-for="(o, key) in th.oper" :key="key" @click="o.clickFun(scope.row)" type="text" size="small">{{o.name}}</el-button>
      </div>
      <div v-else>
       <span v-if="!th.formatData">{{ scope.row[th.prop] }}</span>
       <span v-else>{{ scope.row[th.prop] | formatters(th.formatData) }}</span>
      </div>
     </template>
   </el-table-column>
</el-table>
// 这里是传入的数据 
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显示

<table :tableData="tableData" :rowDblclick="rowDblclick" :tableHeader="tableHeader" :loading="loading"></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 }
  ]
 }
]

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

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

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 这个参数传进去的, 这里主要是因为不同的数据过滤的方法不一样, 所以在表头传数据的时候就一并写上处理数据的方法

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

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

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项目中将element-ui table表格写成组件的实现代码 ,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
jQuery maxlength文本字数限制插件
Apr 16 Javascript
基于jquery的商品展示放大镜
Aug 07 Javascript
探讨jQuery的ajax使用场景(c#)
Dec 03 Javascript
scrollWidth,clientWidth,offsetWidth的区别
Jan 13 Javascript
学习JavaScript设计模式之策略模式
Jan 12 Javascript
基于jQuery实现select下拉选择可输入附源码下载
Feb 03 Javascript
JS实现最简单的冒泡排序算法
Feb 15 Javascript
jQuery+Cookie实现切换皮肤功能【附源码下载】
Mar 25 jQuery
vue+axios 前端实现的常用拦截的代码示例
Aug 23 Javascript
node.js环境搭建图文详解
Sep 19 Javascript
如何在JS文件中获取Vue组件
Sep 16 Javascript
实现AJAX异步调用和局部刷新的基本步骤
Mar 17 Javascript
React 全自动数据表格组件——BodeGrid的实现思路
Jun 12 #Javascript
详解如何提升JSON.stringify()的性能
Jun 12 #Javascript
基于vue-cli搭建多模块且各模块独立打包的项目
Jun 12 #Javascript
浅谈webpack 四个核心概念之Entry
Jun 12 #Javascript
vue安装遇到的5个报错及解决方法
Jun 12 #Javascript
深入学习JavaScript 高阶函数
Jun 11 #Javascript
javascript防抖函数debounce详解
Jun 11 #Javascript
You might like
PHP file_get_contents设置超时处理方法
2013/09/30 PHP
PHP字符串比较函数strcmp()和strcasecmp()使用总结
2014/11/19 PHP
PHP中的日期时间处理利器实例(Carbon)
2017/06/09 PHP
非主流的textarea自增长实现js代码
2011/12/20 Javascript
一个网页标题title的闪动提示效果实现思路
2014/03/22 Javascript
document.write的几点使用心得
2014/05/14 Javascript
Nodejs实战心得之eventproxy模块控制并发
2015/10/27 NodeJs
AngularJS入门教程之迭代器过滤详解
2016/08/18 Javascript
jQuery插件HighCharts绘制2D金字塔图效果示例【附demo源码下载】
2017/03/09 Javascript
JavaScript实现简单的树形菜单效果
2017/06/23 Javascript
js自定义弹框插件的封装
2020/08/24 Javascript
关于定制FileField中的上传文件名称问题
2017/08/22 Javascript
AngularJS 实现购物车全选反选功能
2017/10/24 Javascript
详解 vue better-scroll滚动插件排坑
2018/02/08 Javascript
javaScript实现游戏倒计时功能
2018/11/17 Javascript
微信小程序使用二次贝塞尔曲线画波浪
2018/12/25 Javascript
js逆向解密之网络爬虫
2019/05/30 Javascript
使用VScode 插件debugger for chrome 调试react源码的方法
2019/09/13 Javascript
使用kbone解决Vue项目同时支持小程序问题
2019/11/08 Javascript
解决Layui 表格自适应高度的问题
2019/11/15 Javascript
Javascript操作select控件代码实例
2020/02/14 Javascript
[48:44]2014 DOTA2国际邀请赛中国区预选赛5.21 TongFu VS HGT
2014/05/22 DOTA
[46:25]DOTA2上海特级锦标赛主赛事日 - 4 败者组第五轮 MVP.Phx VS EG第二局
2016/03/05 DOTA
Flask框架学习笔记(一)安装篇(windows安装与centos安装)
2014/06/25 Python
pygame实现弹力球及其变速效果
2017/07/03 Python
Python+tkinter使用80行代码实现一个计算器实例
2018/01/16 Python
Python 实现12306登录功能实例代码
2018/02/09 Python
Django中间件基础用法详解
2019/07/18 Python
浅谈python3中input输入的使用
2019/08/02 Python
关于Python 解决Python3.9 pandas.read_excel(‘xxx.xlsx‘)报错的问题
2020/11/28 Python
CHARLES & KEITH台湾官网:新加坡时尚品牌
2019/07/30 全球购物
广告业务员岗位职责
2014/02/06 职场文书
生物科学专业职业规划书范文
2014/02/11 职场文书
货车司机岗位职责
2014/03/18 职场文书
教育见习报告范文
2014/11/03 职场文书
遗失证明范文
2015/06/19 职场文书