由于业务需要对vue实现select级联进行样式上的修改部分vue实现select级联还需要使用原样式。这种情况可以通过两种方式来实现:
2 通过二次封装组件相对于仅修改css样式来说更加的灵活
本次介绍第二种方式对组件进行二次封装
阿里出品的Ant Design UI组件用起来可以说是佷顺手的但是用多了会发现有时候还能更高效一点,那么我就萌生了对个别组件惊醒二次封装的念头接下来我就介绍下我二次封装的表格组件,事先说明:以下组件是基于antdV3版本的V4版本使用分页会存在问题(已解决待下次更新)
有积分得也可以直接在csdn下载(谢谢各位老板)=》
下面我将分模块的介绍下我的封装思路及各个部门的功能
基础列表显示功能只需要一个地址参数url和列参数columns就可以实现列表的显示,當然前提是你请求参数为
并且没有其他的筛选参数,这样通过getData方法就是获取列表参数getData()如下:
切记:在外送数据处理后一定要调用inputData ()传入數据,否则表格将不显示
在getData()方法里的备注里已经有简单的提到了,接下来详细说明下主要是通过参数changePageParam实现,使用方法详见源代码md文件实现方法看下es6变量属性名和组件里的traverse()方法
组件里有四个对外的参数,也就是列表必须的四个参数:页数page页条数pagesize,返回列表属性名:list返回总条数属性名:totalCount有了这四个参数基本的显示肯定是没问题的,再根据你们定义的参数名对应进行修改就可自定义请求体返回体這样是达到了自定义请求体返回体的效果,但同时也埋了个雷就是页面使用多个表格组件时参数不一样的话分页/请求会出问题,还没想箌好的解决办法。
通过调用inputParam()方法实现,代码如下:
使用详见源代码md文件方法说明
使用详见源代码md文件方法说明
又是外部需要手動刷新表格内容,就可以调用refresh()方法代码如下:
使用详见源代码md方法说明
有时不想刷新表格只想清楚多选,可以调用cleanvue实现select级联edRow()方法代码如下:
使用详见源代码md文件方法说明
单独列的溢出处理可以使用columns参数里的overflow搭配width设置宽度,超过显示省略号
全部设置的话使用handleOverflow参數,这样搭配列参数的width设置宽度超过显示省略号,就不用挨个列的设置overflow了当然也可以使用antd自带的ellipsis属性,待笔者有空完善下。
生命周期添加内容溢出处理,当然也是能解决的但是笔者懒得去动了,用的地方不多等需求多了我在兼容处理下。
还有比如排序假数据顯示,请求体修改这几个功能也都是支持的具体使用详见源代码md文件方法说明
同页面存在多个表格组件时会存在串参数的问题,导致请求出错、分页出错、排序显示NaN问题
作为一个初级前端工作者欢迎大家對我的代码、思路进行指导,谢谢大家
由于业务需要对vue实现select级联进行样式上的修改部分vue实现select级联还需要使用原样式。这种情况可以通过两种方式来实现:
2 通过二次封装组件相对于仅修改css样式来说更加的灵活
本次介绍第二种方式对组件进行二次封装
版权声明:文章内容来源于网络,版权归原作者所有,如有侵权请点击这里与我们联系,我们将及时删除。