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': 'dddd@3qq.cn',
'cal_owner': 'dddd@3qq.cn',
'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实现对单节点的编辑功能