Vue二次封装el-Table表格
Vue 封装Table表格
·
随着需求的增多,很多做b端的码友们都会发现明明一样的表格非要每个页面都需要引入一遍造成页面代码重复繁琐,有没有想过我们可以把他抽出来,这样就可以减少页面代码量呢,话不多说上代码。
(1)第一步在components下面创建table,并引入el-table
(2)一般情况下表格都需要序号的吧 ,这个看需求需求如果展示序号我们就让它展示反之隐藏,小编习惯默认隐藏掉
(3)然后去渲染我们的动态列,动态列接受数组json的形式,渲染动态列的时候我们需要思考项目中有些列是需要特殊展示的,比如操作列,时间列,我们可以定义一个type来判断这一列是否需要特殊展示需要的话这时候我们就需要用到作用域插槽,不需要就正常展示文字
这时候我们成功了60%了,掌声鼓励!!!!
(4)有表格必然要分页可能也不需要分页具体看项目需求,这时候我们就需要传递参数来判断是否需要展示分页 currentPage表示当前页数 pageSize表示每页数量 total表示总数,
这样我们的表格就可以应对一般类型业务啦
项目中使用的话可以把组件挂载到全局,也可以单个页面引入小编是挂载到全局
这样就是封装表格的过程啦,可能还有封装缺陷,哪里不足的地方请大神多多指教
更多推荐
已为社区贡献2条内容
所有评论(0)