目錄
老規矩：先走波流程看實現效果！
實現過程：
在question-edit界面實現查詢數據，將數據以樹狀圖效果渲染出來，question-edit要給tree文件註冊權限。
首先講解tree文件代碼；再講question-edit界面如何註冊tree文件權限，實現數據以樹狀圖渲染出來的。
代碼在前，解釋在後
一、tree封裝
新建個文件夾tree
check-tree是專門查詢數據承樹狀圖渲染的效果，下面打開代碼來詳細講解他的封裝
1.tree組件代碼：
<el-tree
:data="datas(dataList)"
ref="tree"
show-checkbox
node-key="id"
:check-strictly="false"
default-expand-all
:expand-on-click-node="false"
@check-change="checkChange"
@check="getCheckedNodes"
>
<span slot-scope="{ node, data }">
<span v-if="node.data.flag">{{ data.name }}</span>
</span>
</el-tree>
解釋：
node-key：未全選中子節點，父節點的node-key不會被放進綁定的數組裏
check-strictly：表示在顯示覆選框的情況下，是否嚴格的遵循父子不互相關聯的做法，默認爲 false
default-expand-all：並不能展開所有節點
expand-on-click-node: 是否在點擊節點的時候展開或者收縮節點默認爲true
2.定義dataList：
props: {
dataList: {
type: Array,
default: function() {
return [];
}
}
},
解釋：
props：接收父組件question-edit傳過來的值
3.定義初始值
data() {
return {
getKeys: [],
getLastKey: "",
flag: true
};
},
解釋：
getKeys：最字節點的key值
getLastKey：最字節點的key值
4.computed和mthods的區別：
computed:在HTML DOM加載後馬上執行
methods：必須要有一定的觸發條件才能執行
想一想當我想點擊一個功能把樹狀圖渲染出來，它的方法肯定在computed裏，點擊事件一加載就把樹狀圖展現出來，所以：
下面就是一開始樹狀圖組件中的兩個事件了
@check-change="checkChange"
@check="getCheckedNodes"
此時，tree的查看展示封裝好了，接來來講如何註冊它的權限
二、註冊tree權限
像彈出dialog組件只是做了個visible的true和false，這裏就不講了
1.引入樹形控件子組件
<tree :dataList="allTestClassify" @listenEvent="getCheckedNodes"></tree>
import tree from "../tree/check-tree";
components: {
tree
},
methods: {
getCheckedNodes(value) {},
getCheckedNodes(getLastKey) {
this.keyID = getLastKey.id;
console.log(this.keyID);
},
}
解釋：
@listenEvent="getCheckedNodes"：是tree組件中將數據提交過來的，這邊利用getCheckedNodes做監聽，接收子組件傳過來的數據
import tree from "../tree/check-tree"：尋路徑，這個不多解釋了
components：全局組件，將tree註冊權限
2.試題分類點擊事件，調用接口（調用接口忽略）
<el-button type="primary" @click="showDialog" plain>試題分類</el-button>
點擊事件是彈出dialog對話框把樹形圖顯示出來，它的調用接口就不多做解釋了，上關鍵代碼
async showDialog() {
this.allTestClassify.splice(0, this.allTestClassify.length);
this.proxyTestClassify = res.data;
this.proxyTestClassify.map((item, index) => {
this.allTestClassify.push(
Object.assign({
id: item.id,
name: item.name,
parentId: item.parentId,
flag: true
})
);
});
},
3.清楚渲染的是誰的數據
這裏拿自己的舉例，我渲染的是課程下拉的數據章節，在它調用接口下加入代碼
