console
new Vue({
data() {
const data = [{
id: 1,
label: '一级 1',
disabled: true,
children: [{
id: 4,
label: '二级 1-1',
disabled: true,
children: [{
id: 9,
label: '三级 1-1-1',
disabled: true,
}, {
id: 10,
label: '三级 1-1-2',
disabled: true,
}]
}]
}, {
id: 2,
label: '一级 2',
disabled: true,
children: [{
id: 5,
label: '二级 2-1',
disabled: true,
}, {
id: 6,
label: '二级 2-2',
disabled: true,
}]
}, {
id: 3,
label: '一级 3',
disabled: true,
children: [{
id: 7,
label: '二级 3-1',
disabled: true,
}, {
id: 8,
label: '二级 3-2',
disabled: true,
}]
}];
return {
data: JSON.parse(JSON.stringify(data))
};
},
methods: {
append(data) {
const newChild = { id: id++, label: 'testtest', children: [] };
if (!data.children) {
this.$set(data, 'children', []);
}
data.children.push(newChild);
},
remove(node, data) {
const parent = node.parent;
const children = parent.data.children || parent.data;
const index = children.findIndex(d => d.id === data.id);
children.splice(index, 1);
},
eit(data) {
console.log(data)
data.disabled = !data.disabled
}
}
}).$mount('#app')
<div id="app">
<p>使用 scoped slot</p>
<el-tree
:data="data"
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>
<el-input :disabled="data.disabled" size="mini" style="width:35%"></el-input>
<span>
<el-button
type="text"
size="mini"
@click="() => append(data)">
Append
</el-button>
<el-button
type="text"
size="mini"
@click="() => remove(node, data)">
Delete
</el-button>
<el-button
type="text"
size="mini"
@click="eit(data)">
eit
</el-button>
</span>
</span>
</el-tree>
</div>
.custom-tree-node {
flex: 1;
display: flex;
align-items: center;
justify-content: space-between;
font-size: 14px;
padding-right: 8px;
}