189 8069 5689

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

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

创新互联坚持“要么做到，要么别承诺”的工作理念，服务领域包括：成都做网站、成都网站建设、企业官网、英文网站、手机端网站、网站推广等服务，满足客户于互联网时代的黄埔网站设计、移动媒体设计的需求，帮助企业找到有效的互联网解决方案。努力成为您成熟可靠的网络建设合作伙伴！

上面这段代码是一个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 }
  ]
 }
]

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

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表格写成组件的实现代码 ,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对创新互联网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！


网站名称：vue项目中将element-uitable表格写成组件的实现代码
网页URL：http://cdxtjz.cn/article/iehhpc.html

其他资讯