首先說明個人自我感覺我這個辦法比較low，算是拋磚引玉，希望各位高手有更好的辦法多多指點！多謝
我們的需求是鼠標進入節點的時候對應節點后面顯示添加刪除按鈕，本來用JQ挺好實現的效果，但是在vue中個人感覺不那么容易實現，
最初我是想通過v-show 或者v-if 來控制這些按鈕的顯示和隱藏，但是效果確是我放上去以后所有節點后面的按鈕都顯示出來了 ，代碼和效果如下
----------------------------------------------------------------
<el-tree
:data="changeTreeData"
:props="defaultProps"
node-key="id"
:show-checkbox=this.checkFlag
:default-checked-keys='nodeArr'
:default-expand-all="checkFlag"
:default-expanded-keys="expanded"
ref="tree"
>
<span class="custom-tree-node" slot-scope="{ node, data }" @mouseleave= mouseleave(data,$event)>
<span :dataType="data.type"
@mouseover=mouseover(data,$event)>
<i :class="data.iconSkin"></i>
{{ node.label }}
</span>
<span class="node" v-if="data.type == 1 || data.type == 3">
<el-button
type="text"
size="mini"
class="treeAppend"
@click="treeAppendShow(data)"
>
<span></span>
</el-button>
</span>
<span class="node" v-if="data.type == 2 || data.type == 4">
<el-button
type="text"
size="mini"
class="treeDel"
>
<span></span>
</el-button>
</span>
<span class="node" v-if="data.type == 9">
<el-button
type="text"
size="mini"
class="treeEdit">
<span></span>
</el-button>
</span>
</span>
</el-tree>
----------------------------------------------
顯然這不是我想要的結果，后來經過各方面找資料也沒有找到合適的辦法，想過動態創建，插入，但是沒有成功，應該是對動態創建不太熟悉的原因，因為這個事不急，就是我的一個練習項目，所以我就放下了，
過了一天，突然腦子開竅了，想到了用class來實現顯示隱藏效果，然后完美解決了，上代碼
-----------------------------------------------------------------------------
視圖部分:
<el-tree
:data="changeTreeData"
:props="defaultProps"
node-key="id"
:show-checkbox=this.checkFlag
:default-checked-keys='nodeArr'
:default-expand-all="checkFlag"
:default-expanded-keys="expanded"
ref="tree"
>
<span class="custom-tree-node" slot-scope="{ node, data }" @mouseleave= mouseleave(data,$event)>
<span :dataType="data.type"
@mouseover=mouseover(data,$event)>
<i :class="data.iconSkin"></i>
{{ node.label }}
</span>
<span class="node none" v-if="data.type == 1 || data.type == 3"> //節點增加了class類名none
<el-button
type="text"
size="mini"
class="treeAppend"
@click="treeAppendShow(data)"
>
<span></span>
</el-button>
</span>
<span class="node none" v-if="data.type == 2 || data.type == 4"> //節點增加了class類名none
<el-button
type="text"
size="mini"
class="treeDel"
>
<span></span>
</el-button>
</span>
<span class="node none" v-if="data.type == 9"> //節點增加了class類名none
<el-button
type="text"
size="mini"
class="treeEdit">
<span></span>
</el-button>
</span>
</span>
</el-tree>
數據部分：
data(){
return {
treeEditDataList:[
{
"id": "C000065METAAI0001",
"type": "0",
"orgName": "693首次檢定模型",
"iconSkin": "assets1",
"checked": true,
"iconHealth": "1",
"children": [
{
"type": "1",
"orgName": "檢定項",
"iconSkin": "unit1",
"checked": true,
"iconHealth": "1",
"children": [
{
"type": "2",
"orgName": "檢定項0",
"iconSkin": "baseunit1",
"checked": true,
"iconHealth": "1",
"children": [
{
"type": "3",
"iconSkin": "part1",
"checked": true,
"iconHealth": "1",
"children": [
{
"type": "4",
"orgName": "外觀0",
"iconSkin": "basepart1",
"checked": true,
"iconHealth": "1",
"children": [
{
"type": "9",
"suffix": "",
"iconSkin": "parameter1",
"checked": true,
"iconHealth": "1",
"children": [],
"attributeData": {
"aid": "C000065METAAI0001",
"add": true,
"remove": true
},
"head": "結論",
"name": ""
}
],
"attributeData": {
"aid": "C000065METAAI0001",
"add": true,
"remove": true
},
"head": "外觀0(外觀0)",
"name": ""
}
],
"attributeData": {
"aid": "C000065METAAI0001",
"add": true,
"remove": true
},
"head": "外觀",
"name": ""
},
{
"type": "3",
"iconSkin": "part1",
"open": false,
"checked": true,
"iconHealth": "1",
"children": [
{
"type": "4",
"orgName": "標識0",
"iconSkin": "basepart1",
"checked": true,
"iconHealth": "1",
"children": [
{
"type": "9",
"suffix": "",
"iconSkin": "parameter1",
"checked": true,
"iconHealth": "1",
"children": [],
"attributeData": {
"aid": "C000065METAAI0001",
"add": true,
"remove": true
},
"head": "結論",
"name": ""
}],
"attributeData": {
"aid": "C000065METAAI0001",
"add": true,
"remove": true
},
"head": "標識0(標識0)",
"name": ""
}],
"attributeData": {
"aid": "C000065METAAI0001",
"add": true,
"remove": true
},
"head": "標識",
"name": ""
}
],
"attributeData": {
"aid": "C000065METAAI0001",
"add": true,
"remove": true
},
"head": "檢定項0(檢定項0)",
"name": ""
}
],
"attributeData": {
"aid": "C000065METAAI0001",
"add": true,
"remove": true
},
"head": "檢定項",
"name": ""
}
],
"attributeData": {
"aid": "C000065METAAI0001",
"add": true,
"remove": true
},
"head": "693首次檢定模型---占位假數據",
"name": ""
}
]
}
}
邏輯部分：
methods:{
mouseleave(data,$event){
$event.currentTarget.firstElementChild.nextElementSibling.setAttribute('class','node none')
},
mouseover(data,$event){
$event.currentTarget.nextElementSibling.setAttribute('class','node block');
}
}
樣式部分 我就不寫了 一個none 一個block 類名
------------------------------------------------------------
最終效果如下：
