vue+elementui中对el-table进行封装

组件简单的封装之后可以进行重复的使用,并且也规定好各种规则,对于代码的优化,页面的一致性有很大的好处

不说那么多直接上代码:首先我们需要建三个文件分别是css、js、html,当然如果是纯vue的项目的话就直接vue文件和css文件

我这里是通过define、require进行的封装的

vue+elementui中对el-table进行封装

建好这三个文件后首先可以先写html:

vue+elementui中对el-table进行封装

vue+elementui中对el-table进行封装

接下来就是js:

vue+elementui中对el-table进行封装vue+elementui中对el-table进行封装

vue+elementui中对el-table进行封装

vue+elementui中对el-table进行封装

vue+elementui中对el-table进行封装

这里面需要注意的就是方法中的handleClick和handleCurrentTableChange通过这两个方法$emit回传到父页面

css中的就是写自己的样式

vue+elementui中对el-table进行封装

我这个里面没有写分页,这个当然是可以控制的,通过v-show或者v-if去控制

接下来就看看怎么在父组件中调用

因为我这个用的define,所以我需要在require中全局注入

vue+elementui中对el-table进行封装

vue+elementui中对el-table进行封装

vue+elementui中对el-table进行封装

vue+elementui中对el-table进行封装

vue+elementui中对el-table进行封装