Vue2基于el-table进行二次封装

程序员小陈与BUG

已于 2023-06-20 14:16:03 修改

阅读量471

点赞数 1

文章标签： vue.js elementui 前端

于 2023-04-29 17:33:26 首次发布

本文链接：https://blog.csdn.net/m0_46355547/article/details/130442140

版权

文章介绍了如何基于Vue2的el-table组件进行二次封装，以简化el-table-column的使用，通过动态生成列来减少重复代码。封装后支持编辑、删除事件，以及自定义分页和操作列。提供了包括tableList、tableType、index、Edit、del等在内的参数配置，并允许用户自定义最后一列的操作标签。

摘要由CSDN通过智能技术生成

Vue2基于el-table进行二次封装

封装思路

1、在我们使用el-table的时候每次都需要写大量的el-table-cloumn这样就会很麻烦，所以就对el-table进行了二次封装，让el-table-cloumn可以自己循环生成，

具体实现代码如下

在这里插入图片描述

在父组件里面可以这样使用

在这里插入图片描述

参数及方法介绍

Events

事件名	说明
edit	如果最后一列使用了作者提供的,点击编辑按钮,返回本行的row
del	如果最后一列使用了作者提供的,点击删除按钮的确定按钮,返回本行的row
page	每页条数,返回每页的条数
limit	每页的页码,返回每页的页码

Attributes

参数	说明	类型	默认值
tableList	放的是el-table里面的data对应值(必传)	Array
tableType	接收一个数组对象,里面的值应该为[{lable:‘表头名’,type:‘插槽的名字’,prop:‘表里面的数据’}]type为不必须传值,但是剩余的两个必须传对应的,且里面的键值不能自定义,否则出不来效果	Array
index	开启表格是否需要最前面的#	Boolean	true
Edit	当最后一行没有使用插槽模式的时候,这个属性可以控制修改按钮是否显示	Boolean	true
del	当最后一行没有使用插槽模式的时候,这个属性可以控制删除按钮是否显示	Boolean	true
operate	最后一列开启插槽模式	Boolean	false
operation	自定义最后一行的label值,默认是’操作’	String	操作
total	总数	Number
page	页面值(必传)	Number
current	页码值(必传)	Number
pagesize	分页器的值	Array	[4, 10, 20, 30]
pagination	是否开启分页功能	Boolean	true