element-ui 的组件：

1，e-tree组件

<el-tree
                    :data="pdata"
                    show-checkbox
                    node-key="id"
                    default-expand-all
                    :expand-on-click-node="false">
         <span class="custom-tree-node" slot-scope="{ node, data }">
        <span>{[ node.label]}</span>
        <span>
            <span class="rule-name-margin rule-span"
                  :class="('disable' in data && 'Delete' in data.disable && (data.disable.Delete==1 ||data.disable.Delete=='1')) ?'disaber':''"
                  v-if=" 'Delete' in data.actions"> 删: <span
                    class="rule-value">{[ data.actions["Delete"] ]}</span></span>
            
        <span>
          <el-button type="text" size="mini" @click="() => goto_remove_dialog(node, data)" v-if="(data.isBaseConf=='0')" icon="el-icon-delete">
          </el-button>
             <el-button type="text" @click="() => goto_edit_dialog(node, data)"  v-if="(data.isBaseConf=='0')" icon="el-icon-setting">
          </el-button>
        </span>
      </span>
            </el-tree>
           

（项目代码，没有完成展示出来）

<el-tree></el-tree>组件之间的<span class="custom-tree-node" slot-scope="{ node, data }"></span>之间的的html标签，比如代码中的<span></span>是在每一行展示的，内部可使用node,和data 

node 是包含label和children的节点数据，data是传入的这个节点数据。

比如我的数据传入格式是：

{
	'label': 'ss-hadoop',
	'id_tag': {
		'Delete': 151,
		'Set1': 152,
		
	},
	'actions': {
		'Delete': 28,
		'Set1': 21,
	
	},
	'disable': {
		'Delete': 0,
		'Set1': 0,
		
	},
	'id': 154,
	'isBaseConf': 1,
	'real_path': '/',
	'owner': '[email protected]',
	'cal_owner': '[email protected]',
	'children': [{
		'label': 'ads',
		'id_tag': {
			'Delete': 1
		},
		'actions': {
			'Delete': 180,
			'Set1': 21,
		
		},
		'disable': {
			'Delete': 0,
			'Set1': 0,
		
		},
           

node数据包含如下属性：

 而data包含自定义的属性：比如id_tag,isBaseConf,real_path，owner，cal_owner，等

效果

某个几点的数据直接使用

怎么使用dialog编辑或删某个节点的数据？

2，使用el-tree 加 el-dialog实现对单节点的编辑功能