<template> <div id="Tree_ElementTree" style="height: 100%;"> <el-tree :data="data" :props="defaultProps" highlight-current lazy :load="loadNode" :show-checkbox="showCheckbox" :style="style" :node-key="nodeId" :default-expanded-keys=" []" :default-expand-all=" false" @node-click="handleNodeClick" @check="handleCheck" > <span class="custom-tree-node" slot-scope="{ node, data }"> <span>{{ node.label }}</span> <span> <el-button type="text" size="mini" @click.stop="() => append(data)"> Append </el-button> <el-button type="text" size="mini" @click.stop="() => remove(node, data)"> Delete(这样点击的时候,就不会触发点击节点的事件) </el-button> </span> </span> </el-tree> </div> </template> <script> export default { name: "Tree_ElementTree", data() { return { data: [], defaultProps: { children: "children", label: "name" } }; }, props: { componentJson: { type: Object, require: true } }, created() {}, components: {}, mounted() { }, computed: {}, watch: {}, methods: { } }; </script> <style scoped> </style> <style>
/*添加滚动条的解决办法*/
.custom-tree-node { flex: 1; display: flex; align-items: center; justify-content: space-between; font-size: 14px; padding-right: 8px; } .el-tree{ 100%; overflow-x: scroll; } .el-tree> .el-tree-node{ min- 100%; display:inline-block !important; } </style>