Vue Element UI 自定义描述列表组件
# 效果图 ![01.png][1] > 写在前面 写后台管理经常从列表点击查看详情,展示数据信息,Element UI虽然有表格组件,但是描述组件并没有,之前团队的成员遇到这种情况都自己去写样式,写起来也麻烦,而且每个人写出来的样式也不统一,破坏了项目的整体风格。 像是Ant Design UI就有描述组件,用起来特别舒服,所以索性自己结合Element UI的el-row和el-c
# 效果图 ![01.png][1] > 写在前面 写后台管理经常从列表点击查看详情,展示数据信息,Element UI虽然有表格组件,但是描述组件并没有,之前团队的成员遇到这种情况都自己去写样式,写起来也麻烦,而且每个人写出来的样式也不统一,破坏了项目的整体风格。 像是Ant Design UI就有描述组件,用起来特别舒服,所以索性自己结合Element UI的el-row和el-c
element-ui自带的图标库还是不够全,还是需要需要引入第三方icon,自己在用的时候一直有些问题,参考了些教程,详细地记录补充下 对于我们来说,首选的当然是阿里icon库 教程: 1.打开[阿里icon][1],注册 >登录>图标管理>我的项目 ![01.jpg][2] ![02.jpg][3] 项目名称随便写。前缀注意,不要跟`element-ui`自带的ico
## 1、问题原因 因为第一调用渲染子组件后,不再对子组件的`created`进行调用 ## 2、解决方法 用v-if将子组件包裹起来,因为`v-if=false`时可以将子组件销毁掉,再次调用时重新渲染 ## 3、上图 ![01.jpg][1] 初始默认`dialogVisible1=false`,当执行打开窗口的操作时`dialogVisible1`为`true