使用 scoped slot添加子节点
最后效果如图
主要是用到dom的节点控制。
$event.currentTarget.firstElementChild.nextElementSibling.setAttribute(
"class",
"set_new_class"
);
通过对节点的控制,点击文本时,给el-icon-success对号图标添加set_new_class样式。控制颜色和位置的变化。
Element 组件html代码
<el-input
placeholder="输入关键字进行过滤"
v-model="filterText"
clearable>
</el-input>
<el-tree
:data="treeDemodata"
show-checkbox
node-key="id"
ref="demoTree"
default-expand-all
:expand-on-click-node="false"
:filter-node-method="filterDemo">
<div style="width:100%;" slot-scope="{ node, data }" @click="showAlert(data, $event)">
<span>{{ node.label }} </span>
<span><i class="el-icon-success"></i></span>
<span>
<el-button
type="text"
size="mini"
@click="() => append(data)">
<i class="el-icon-plus"></i>
</el-button>
<el-button
type="text"
size="mini"
@click="() => remove(node, data)">
<i class="el-icon-close"></i>
</el-button>
</span>
</div>
</el-tree>
添加js控制
let id = 1000;
export default Vue.extend({
data:{
return:{
filterText:'',
treeDemodata:[{
id: 1,
label: '一级 1',
children: [{
id: 4,
label: '二级 1-1',
children: [{
id: 9,
label: '三级 1-1-1'
}, {
id: 10,
label: '三级 1-1-2'
}]
}]
}, {
id: 2,
label: '一级 2',
children: [{
id: 5,
label: '二级 2-1'
}, {
id: 6,
label: '二级 2-2'
}]
}, {
id: 3,
label: '一级 3',
children: [{
id: 7,
label: '二级 3-1'
}, {
id: 8,
label: '二级 3-2'
}]
}],
}
},
watch:{
filterText(val) {
this.$refs.demoTree.filter(val);
}
},
methods:{
showAlert(data, $event){
console.log(data, $event)
$event.currentTarget.firstElementChild.nextElementSibling.setAttribute(
"class",
"set_new_class"
);
this.$message("Please")
},
filterDemo(value, data){
if (!value) return true;
return data.label.indexOf(value) !== -1;
},
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);
},
}
})
添加set_new_class类样式设置
.set_new_class{
color:red;
float:right;
}