原文鏈接：
原文
代碼：
<div class="warpper"> </div>
<script type="text/javascript">// <![CDATA[
export default {
data() {
return {
ParmentData: null,
TreeData: [
{
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'
}
],
show: true
}],
defaultProps: {
children: 'children',
label: 'label'
},
treeKey:'',
}
},
created() {
this.$nextTick(function(){
this.$data.TreeData.forEach(row => {
if(row.show){
this.$refs.tree.setCurrentKey(row.id);
this.$refs.tree.store.nodesMap[row.id].expanded = true;
}
})
})
},
methods: {
handleNodeClick: function (data,checked) {
// 點擊事件
},
handleCheckChange(data, checked, indeterminate) {
console.log(data, checked, indeterminate);
},
}
}
// ]]></script>
<style><!--
.warpper .el-tree--highlight-current /deep/ .el-tree-node.is-checked > .el-tree-node__content {
background-color: rgb(255, 255, 255);
color:rgb(64, 158, 255);
}
.warpper .el-tree--highlight-current /deep/ .el-tree-node.is-current > .el-tree-node__content {
background-color: rgb(255, 255, 255);
color:rgb(64, 158, 255);
}
--></style>