苏州企业门户网站,工信部域名备案管理系统,十大仓库管理软件,清理网站数据库文章目录 概要整体架构流程 概要 把公共的部分单独拆出来#xff0c;封装到一个新的vue文件夹中#xff0c; 里面的数据通过父传子的方式传递#xff0c;子通过props接受#xff08;静态代码实现的树状图细看代码展示#xff09; 整体架构流程 template!-- … 文章目录 概要整体架构流程 概要 把公共的部分单独拆出来封装到一个新的vue文件夹中 里面的数据通过父传子的方式传递子通过props接受静态代码实现的树状图细看代码展示 整体架构流程 template!-- 组织架构 放一个el-tree --el-rowtypeflexjustifyspace-betweenalignmiddlestyleheight: 40px; width: 100%el-col!-- 左侧内容 --span{{ treeNode.name }}/span/el-colel-col :span4el-row typeflex justifyendel-col{{ treeNode.manager }}/el-colel-col!-- 放置下拉菜单 --el-dropdown!-- 内容 --span操作i classel-icon-arrow-down //span!-- 具名插槽 --el-dropdown-menu slotdropdown!-- 下拉选项 --el-dropdown-item添加子部门/el-dropdown-itemel-dropdown-item v-if!isRoot编辑部门/el-dropdown-itemel-dropdown-item v-if!isRoot删除部门/el-dropdown-item/el-dropdown-menu/el-dropdown/el-col/el-row!-- 右侧内容 --/el-col/el-row /template script export default { // 组件要对开放 属性 外部需要提供一个对象 对象里面需要有name manger// props 可以用数组接受数据 也可以用对象来接受// props { props属性 { 配置项}}props: {treeNode: {type: Object, // 数据类型require: true // 要求对方使用您的组件的时候 必须传入treeNode属性},isRoot: {type: Boolean,default: false}} } /script style/style 2 父组件中通过引用来实现把引入的组件通过compones 注册组件 把组件引入到需要的地方父组件用的时候要传入子组件需要用到的参数就是子组件props里面申明的值 templatediv classdashboard-containerdiv classapp-container!-- 组织架构内容 头部 --el-card classtree-cardTreetocer :tree-nodecompany :is-roottrue /!-- 组织架构 放一个el-tree --el-tree :datadeparts :propsdefaultProps :default-expand-alltrue!-- 传入内容 插槽内容 会循环多次 有多少节点 就循环多少次 --!-- 作用域插槽 slot-scopeobj 接收传递给插槽的数据 data 每个节点的数据对象--Treetocer slot-scope{ data } :tree-nodedata //el-tree/el-card/div/div /template script import Treetocer from /views/departments/componente/tree-tools.vue export default {components: {Treetocer},data() {return {company: { name: 三国之协调有限公司, manager: 负责人 },departs: [{ name: 总裁办, manager: 曹操, children: [{ name: 董事会, manager: 曹丕 }] },{ name: 行政部, manager: 刘备 },{ name: 人事部, manager: 孙权 }],defaultProps: {label: name // 表示 从这个属性显示内容}}} } /script style scoped .tree-card {padding: 30px 140px;font-size:14px; } /style