IVIEW的Table的children表格的展开样式修改

碰到的问题是:原始的图标类型是,需求是想把官方的图标换掉,想使用自己定义的图标,于是去官网查了一波API,都是查询无果,并没有找到替换的方法(可能以后会加上把),然后想了三种方案,一、就是讲该组件库换掉,换成其他的组件库,像使用Element-UI(好像饿了么不怎么维护了),我适用了其他的组件但还是出现了许多问题,比如数据格式都要进行重新调整,于是放弃了改个方案。二、既然组件源码写死在那里,于是考虑是否可以修改源码来进行需求的完成,但是考虑到修改官方的源码,已经修改好了,但是使用的时候并没有生效,于是,查了很久,里面相当于用自己造的*去替换官方的*,考虑到通用性,于是果断放弃该方法。三、就是使用样式覆盖,应该是最简单也是最好用的办法的,不需要改任何的代码,只需要把现有的图标样式进行修改,整了很长时间之后发现其实很简单的。

如下图,图源来自官网

IVIEW的Table的children表格的展开样式修改

IVIEW的Table的children表格的展开样式修改 

修改样式1:IVIEW的Table的children表格的展开样式修改 不直接粘贴源代码了,直接去浏览器截图了。去掉了边框和白底

修改样式二:IVIEW的Table的children表格的展开样式修改

然后再将自己想要的官方图标替换原有的内容图标IVIEW的Table的children表格的展开样式修改 把contend里面的内容替换成自己想要的,至于官方图标怎么去找,下面的教程就是

IVIEW的Table的children表格的展开样式修改

 

这个插件安装路径下去找到IVIEW的Table的children表格的展开样式修改

iview的源文件夹,4.0之后叫做view-design,然后再去找叫_ionicons-icons.lessIVIEW的Table的children表格的展开样式修改 

然后可以去官网找好自己想要的图标 IVIEW的Table的children表格的展开样式修改

找好自己想要的图标,然后去刚刚找的那个文件夹去找对应的名称

如下IVIEW的Table的children表格的展开样式修改 IVIEW的Table的children表格的展开样式修改

再讲对应的content进行替换就大功告成了

IVIEW的Table的children表格的展开样式修改