ui table表格写成组件的实现代码(2)

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

  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 },

最最后, 看我的表格:

ui table表格写成组件的实现代码

总结

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

您可能感兴趣的文章:

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.heiqu.com/42d32e8ebd147d1ee026dd208c5b9f5e.html