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中通过父级查找进行定位示例
Jun 28 Javascript
javascript获取隐藏dom的宽高 具体实现
Jul 14 Javascript
jQuery取得select选择的文本与值的示例
Dec 09 Javascript
JavaScript去除数组里重复值的方法
Jul 13 Javascript
jQuery  ready方法实现原理详解
Oct 19 Javascript
Node.js+ES6+dropload.js实现移动端下拉加载实例
Jun 01 Javascript
Vue.js中的图片引用路径的方式
Jul 28 Javascript
JS实现图片放大镜插件详解
Nov 06 Javascript
js实现跟随鼠标移动的小球
Aug 26 Javascript
es6中class类静态方法,静态属性,实例属性,实例方法的理解与应用分析
Feb 15 Javascript
Vue的data、computed、watch源码浅谈
Apr 04 Javascript
ES6的循环与可迭代对象示例详解
Jan 31 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 split()函数的用法详解
2013/06/05 PHP
探讨如何在php168_cms中提取验证码
2013/06/08 PHP
php基于jquery的ajax技术传递json数据简单实例
2016/04/15 PHP
有一段有意思的代码-javascript现实多行信息
2007/08/26 Javascript
addEventListener和attachEvent二者绑定的执行函数中的this不相同
2012/12/09 Javascript
深入理解javascript中defer的作用
2013/12/11 Javascript
js计算任意值之间随机数的方法
2015/01/16 Javascript
JavaScript实现单击下拉框选择直接跳转页面的方法
2015/07/02 Javascript
使用jquery实现仿百度自动补全特效
2015/07/23 Javascript
基于javascript实现图片懒加载
2016/01/05 Javascript
Angular2平滑升级到Angular4的步骤详解
2017/03/29 Javascript
用JavaScript做简易的购物车的代码示例
2017/10/20 Javascript
JS实现瀑布流布局
2017/10/21 Javascript
node.js支持多用户web终端实现及安全方案
2017/11/29 Javascript
在Vant的基础上实现添加表单验证框架的方法示例
2018/12/05 Javascript
浅谈Vue.js 关于页面加载完成后执行一个方法的问题
2019/04/01 Javascript
详细讲解如何创建, 发布自己的 Vue UI 组件库
2019/05/29 Javascript
javaScript把其它类型转换为Number类型
2019/10/13 Javascript
taro小程序添加骨架屏的实现代码
2019/11/15 Javascript
vue实现前端列表多条件筛选
2020/10/26 Javascript
[00:32]2018DOTA2亚洲邀请赛EG出场
2018/04/03 DOTA
[36:16]完美世界DOTA2联赛PWL S3 access vs Rebirth 第一场 12.19
2020/12/24 DOTA
Python做简单的字符串匹配详解
2017/03/21 Python
你真的了解Python的random模块吗?
2017/12/12 Python
Python查找文件中包含中文的行方法
2018/12/19 Python
Django数据库类库MySQLdb使用详解
2019/04/28 Python
Pandas+Matplotlib 箱式图异常值分析示例
2019/12/09 Python
pytorch自定义二值化网络层方式
2020/01/07 Python
html5 浏览器支持 如何让所有的浏览器都支持HTML5标签样式
2012/12/07 HTML / CSS
秋季运动会通讯稿
2014/01/24 职场文书
团日活动总结怎么写
2014/06/25 职场文书
代办委托书怎么写
2014/08/01 职场文书
初中中等生评语
2014/12/29 职场文书
财务会计岗位职责
2015/02/03 职场文书
穷人该怎么创业?谨记以下几点
2019/07/11 职场文书
MySQL中int (10) 和 int (11) 的区别
2022/01/22 MySQL