|
|
@ -4,18 +4,17 @@ |
|
|
<el-input placeholder="输入关键字进行过滤" v-model="filterText" size="small" /> |
|
|
<el-input placeholder="输入关键字进行过滤" v-model="filterText" size="small" /> |
|
|
</div> |
|
|
</div> |
|
|
<div> |
|
|
<div> |
|
|
<el-tree :data="customerOrg.customerOrgTree" :props="treeprops" |
|
|
|
|
|
node-key="id" :filter-node-method="filterNode" :style="'overflow: scroll;width:200px;height:' +(window.pageHeight < 600 ? 465 : window.pageHeight - 135) + 'px;'" |
|
|
|
|
|
:default-expanded-keys="customerOrg.defaultExpandedKeys" |
|
|
|
|
|
|
|
|
<el-tree :data="customerOrg.customerOrgTree" :props="treeprops" node-key="id" :filter-node-method="filterNode" |
|
|
|
|
|
:style="'overflow: scroll;width:200px;height:' + (window.pageHeight < 600 ? 465 : window.pageHeight - 135) + 'px;'" |
|
|
|
|
|
:default-expanded-keys="customerOrg.defaultExpandedKeys" @node-contextmenu="nodeContextmenu" |
|
|
@node-click="treeclick" highlight-current ref="customerOrgTree"> |
|
|
@node-click="treeclick" highlight-current ref="customerOrgTree"> |
|
|
<span class="custom-tree-node" slot-scope="{ node, data }"> |
|
|
<span class="custom-tree-node" slot-scope="{ node, data }"> |
|
|
<div> |
|
|
<div> |
|
|
<span class="treeicons"> |
|
|
<span class="treeicons"> |
|
|
<img style="width:20px;height:20px;vertical-align: sub;" src="@/assets/images/order.png" v-if="!data.parentId"/> |
|
|
|
|
|
|
|
|
<img style="width:20px;height:20px;vertical-align: sub;" src="@/assets/images/order.png" |
|
|
|
|
|
v-if="!data.parentId" /> |
|
|
</span> |
|
|
</span> |
|
|
<span |
|
|
|
|
|
:class="!data.parentId ? 'maxtitle' : 'mintitle'" |
|
|
|
|
|
>{{ node.label }} |
|
|
|
|
|
|
|
|
<span :class="!data.parentId ? 'maxtitle' : 'mintitle'">{{ node.label }} |
|
|
</span> |
|
|
</span> |
|
|
</div> |
|
|
</div> |
|
|
</span> |
|
|
</span> |
|
|
@ -35,7 +34,7 @@ export default { |
|
|
return { |
|
|
return { |
|
|
filterText: '', |
|
|
filterText: '', |
|
|
treeprops: { |
|
|
treeprops: { |
|
|
label: "label", |
|
|
|
|
|
|
|
|
label: "displayName", // label/displayName |
|
|
value: "id", |
|
|
value: "id", |
|
|
id: "id", |
|
|
id: "id", |
|
|
children: "treeChildren", |
|
|
children: "treeChildren", |
|
|
@ -117,6 +116,12 @@ export default { |
|
|
|
|
|
|
|
|
}, |
|
|
}, |
|
|
|
|
|
|
|
|
|
|
|
// 节点右击事件 |
|
|
|
|
|
nodeContextmenu(event, data, node, ids) { |
|
|
|
|
|
console.log('event,data,node,ids', event, data, node, ids) |
|
|
|
|
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
|
//树过滤 |
|
|
//树过滤 |
|
|
filterNode(value, data) { |
|
|
filterNode(value, data) { |
|
|
//console.log(value,data) |
|
|
//console.log(value,data) |
|
|
@ -145,10 +150,12 @@ export default { |
|
|
<style scoped> |
|
|
<style scoped> |
|
|
@import "../../assets/css/global.css"; |
|
|
@import "../../assets/css/global.css"; |
|
|
@import "../../assets/css/global_tree.css"; |
|
|
@import "../../assets/css/global_tree.css"; |
|
|
|
|
|
|
|
|
.treeicons { |
|
|
.treeicons { |
|
|
font-size: 20px; |
|
|
font-size: 20px; |
|
|
margin-right: 5px; |
|
|
margin-right: 5px; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
:deep .el-tree-node>.el-tree-node__children { |
|
|
:deep .el-tree-node>.el-tree-node__children { |
|
|
overflow: visible; |
|
|
overflow: visible; |
|
|
} |
|
|
} |
|
|
|