用element-ui 实现组织架构布局需要注意的知识点
2021-08-16 本文已影响0人
沃德麻鸭
头部布局
组件：el-row ，el-col
el-row表示一行，在这个组件上可以直接使用flex的属性
例
el-col表示列，它会嵌套在el-row中使用，很像ul>li,在element-ui中，一行共等分成24列（：span='20' 表示这一列占整行的20/24）
主体布局
用el-tree组件配合插槽
1.树形组建依赖一份结构为树形嵌套的数据结构
2.data中默认 lable 为子节点的文字，children 为子节点（可以通过props修改默认配置）
3.通过设置default-expand-all属性为true，可以控制tree组件默认展开所有的子节点
el-tree自定义结构
实际开发中，后端接口返回的数据可能不是tree组件要求的格式，页面上需要显示的内容也可能比较复杂，采用默认的结构肯定不符合要求，此时，我们需要自定义结构。这时就要用到作用域插槽
什么时候用到作用域插槽？
父组件中如果想使用子组件中的数据进行自定义内容的渲染 (类似于table 单元格数据渲染)
作用域插槽 data拿到的是每一个子节点
作用域插槽定义
作用域插槽使用
