需求:組織機構樹展示帶有單擊彈框,勾選單選框后點擊按鈕進行編輯、刪除等操作
效果如下:
Ⅰ.安裝:(沒有less安裝less)
npm install less-loader less
npm install vue2-org-tree
Ⅱ.在main.js引入注冊
import Vue2OrgTree from 'vue2-org-tree';
Vue.use(Vue2OrgTree)
<el-radio-group v-model="radio" id="orgtree" @change="radiohandler" >
<!-- 收縮屬性 :collapsable=true -->
<vue2-org-tree
name="orgtree"
:data="orgtree" //這里的data是一個object
:horizontal="true"
:render-content="renderContent"
@on-expand="onExpand"
@on-node-click="onNodeClick"
/>
</el-radio-group>
getorganizationTreeNumber(){
post("url").then(res=>{
this.orgtree=res.data.data[0]
})
},
renderContent(h, data) {
let that=this
//因為需要單擊樹節點和勾選單選框,需要用jsx語法實現在樹節點中嵌套 按鈕 和 單選框
let str=<div style="position:relative"><el-radio style="margin-right:0" label={data.id}> </el-radio><el-button class="clickbutton" value={data.id}> {data.name}</el-button></div>
//執行方法默認展開所有節點
this.toggleExpand(this.data,this.expandAll)
//為按鈕綁定事件之前需要解綁之前的時間,否則會綁定很多個相同事件
$(".clickbutton").unbind('click')
$(".clickbutton").on('click', function () {
that.orgid=$(this).attr("value")
//彈出彈框
that.dialogVisible=true
})
return str
},
onExpand(e, data) {
console.log(data ,"ddddddddddddddddd")
if ("expand" in data) {
data.expand = !data.expand;
this.toggleExpand(data,data.expand)
if (!data.expand && data.children) {
this.collapse(data.children);
}
} else {
this.$set(data, "expand", true);
}
},
onNodeClick(e, data) {
if(e.target.className==""){
this.detailorgId=e.target.parentElement.value
this.dialogVisible=true
this.getuser()
}
},
collapse(list) {
var _this = this;
list.forEach(function(child) {
if (child.expand) {
child.expand = false;
}
child.children && _this.collapse(child.children);
});
},
toggleExpand(data, val) {
var _this = this;
if (Array.isArray(data)) {
data.forEach(function(item) {
_this.$set(item, "expand", val);
if (item.children) {
_this.toggleExpand(item.children,val);
}
});
} else {
this.$set(data,"expand",val);
// if (data.children) {
// _this.toggleExpand(data.children, val);
// }
}
}
}
// 組織結構圖end
ie11瀏覽器可能會進不去項目(報錯 SCRIPT1002: 語法錯誤),原因babel轉碼未轉好。
硬核解決辦法:
將圖中兩個文件直接轉為ES5(實測有效,是否有缺陷還未知)
另附github源碼地址:https://github.com/hukaibaihu/vue-org-tree