vue项目中将元素-用户界面表表格写成组件的实现代码

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

el-table :data='tableData '边框尺寸=' mini ' fit高光-当前-行高=' 500 ' El-table-column type=' index ' align=' center ' fixed/El-table-column El-table-column prop=' DHM ' min-width=' 140 px ' 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道具=汽车牌照'标签='号码align=' center '/El-table-column El-table-column prop=' CARD _ NO '最小宽度=' 120 px ' label='卡号align=' center '/El-table-column El-table-column prop=' DATATYPE ' label='数据类型align=' center ' : format=' format datatype '/El-table-column El-table-column prop=' STAFFNAME ' min-width=' 100px ' label='姓名align=' center '/El-table-column El-table-column prop=' MEDIATYPE ' label='付款方式对齐='中心'/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标签='操作最小宽度='140px' align='center '模板槽-范围=' scope ' El-button @ click=' handleClick(作用域。 row)类型=“text”大小=“small”查看/El-button El-button type=' text ' size=' small '编辑/El-按钮/模板/El-表格-列/El-表格上面这段代码是一个元素用户界面中塔伯勒表格的形式，这里表头都是已经固定的，如果每个页面都写上这么一段，不同的是表头名字和字段，这样子就有点重复，而且页面的篇幅也就比较大了，于是把这块写成一个组件，每个页面引入这个组件，再传入数据。

1.表格组件：

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

el-table :data='tableData '边框大小=' mini ' fit高光-当前-行高=' 500 ' : row-style=' row style ' @ row-dblclick=' row dballick ' v-loading=' loading ' element-loading-text='拼命加载中元素-加载-微调器=' El-icon-loading '元素-加载-背景=' rgba(0，0，0，0.3)' El-table-column type=' index ' align=' center ' fixed/El-table-column！- prop:字段名名称，标签:展示的名称，fixed:是否需要固定（左，右),最小宽度：设置列的最小宽度（不传默认值),操作：是否有操作列oper.name:操作列字段名称，操作点击功能：操作列点击事件，formatData:格式化内容-El-table-列v-for='(th，key)在tableHeader ' : key=' key ' : prop=' th。道具' :标签=' th。标签' : fixed=' th。固定宽度为：分钟。minwidth ' align=' center '！-加入模板主要是有操作一栏，操作一栏的内容是相同的，数据不是动态获取的，不过我这里操作一栏的名字定死了（操作表示是操作这一列，否则就不是)-模板slot-scope=' scope ' div v-if=' th。在此操作按钮v-for='(o，键)。oper ' : key=' key ' @ click=' o . click fun(范围。row)type=' text ' size=' small ' { o . name } }/El-button/div v-else span v-if='！第。格式化数据" { scope。第[th]行。prop]}/span span v-else { { scope。第[th]行。prop]|格式化程序(th。格式化数据)}/span/div/template/El-table-column/El-table//这里是传入的数据prop : { TableData: { type : Array，default: Function(){ return[]} }，rowdbalclick : { type : Function，default :(行，事件，列)={ console.log('default: '行'-'事件'-'列)} }，TableHeader : { type 3: Array，默认： Function(){ return[]}，load然后在其他组件中就可以引入桌子组件，将数据传给桌子显示

表： tableData=' tableData ' : row dblclick=' row dblclick ' : tableHeader=' tableHeader ' : loading=' loading '/table其中列表数据是表格中要显示的数据内容，这个内容我的是从后台查询出来的，rowDblclick是双击一行做的操作，如果不需要可以删除，tableHeader是表头显示的数据装载是表格加载的装货方式，默认是没有的

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

导出const tableHeader=[ //表头数据{ prop: 'dhm '，标签: '时间，minWidth: '140px' }，{ prop: 'plazano '，label: '编码，minWidth: '100px' }，{ prop: 'plazano '，label: '名称，minWidth: '100px '，formatdata : val=store。getter s . all plazano 2地图。get(val)}，{ prop: 'car_plate '，label: '号码}，{ prop: 'card_no '，标签: '卡号，minWidth: '120px' }，{ prop: 'laneno '，标签: '数据类型，formatData:函数(val) { return val.substr(2，1)=' 1 '？'出口' : '入口} }，{ prop: 'staffname '，label: '姓名，minWidth: '100px' }，{ prop: 'mediatype '，label: '付款方式}，{ prop: 'comp_cash '，标签: '计算费额}，{ prop: 'fact_cash '，标签: '实收费额}，{ prop: 'oper '，label: '操作，fixed: '右，最小宽度： '140px '，操作： [ { name: '查看，点击功能：手柄点击},{名称： '编辑，点击功能：编辑点击} ] }]现在的代码可能会报错，下面这处的代码是在全局注册了一个过滤器，如果不注册就找不到这个方法就会报错，所以还需要注册一个全局过滤器，如果你不需要对数据做处理可以不要这个过滤器

2.注册全局过滤器，我的是这样写的，首先创建一个新的filter.js文件，然后在里面写一个方法并导出

导出函数格式化程序(val，format){ if(type of(format)==' function '){ return format(val)} else return val }然后将其引入main.js以注册全局筛选器：

从'导入*作为过滤器。/filters '对象。按键(过滤器)。foreach (key={vue。filter (key，filters[key]))})这个筛选方法格式化程序可以用在每一页上。但是，特定的筛选方法是通过参数格式传入的。这里主要是因为不同的数据过滤方式不同，所以数据在表头传递时写入数据处理方式。

如果在很多地方使用同一个方法，可以将这个方法注册为全局方法，然后就可以在每一页直接使用这个方法，而不用重复。

3.注册全局方法

创建一个js文件(我的文件名是validate.js)并编写这个方法。这里，使用exports.install注册全局方法，并将其安装在vue原型上

exports.install=(Vue，options)={ Vue . prototype . validator={ lanenoTransf(val){ return val . substr(2，1)=' 1 '？然后在main.js中引入exit ' : ' entry ' } } } }

从“@/utils/validate”vue . use(验证程序)导入验证程序可以直接在最后一页使用

{prop: 'laneno '，label: '数据类型'，formatdata : this。lanenotransf}，最后，看看我的表：

摘要

以上是边肖介绍的vue项目中编写element-ui表表作为组件的实现代码。希望对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！如果你觉得这篇文章对你有帮助，请转载，请注明出处，谢谢！