Element樹(shù)形控件整合帶圖標(biāo)的下拉菜單(tree+dropdown+input)

第Element樹(shù)形控件整合帶圖標(biāo)的下拉菜單(tree+dropdown+input)目錄需求說(shuō)明：實(shí)現(xiàn)步驟：本文主要講述：自定義樹(shù)形控件el-tree

需求說(shuō)明：

ElementUI官網(wǎng)提供的樹(shù)形控件包含基礎(chǔ)的、可選擇的、自定義節(jié)點(diǎn)內(nèi)容的、帶節(jié)點(diǎn)過(guò)濾的以及可拖拽節(jié)點(diǎn)的樹(shù)形結(jié)構(gòu)如下：

我想要的效果是支持搜索效果的樹(shù)，將鼠標(biāo)懸浮后顯示添加修改圖標(biāo)，點(diǎn)擊圖標(biāo)后彈出對(duì)應(yīng)頁(yè)面；并且在每個(gè)文件夾前添加自定義圖標(biāo)。

實(shí)現(xiàn)效果：

實(shí)現(xiàn)步驟：

1、使用插槽（slot）

el-col:span="4":xs="24"

!--目錄搜索功能--

div

el-input

v-model="dirNameCn"

placeholder="請(qǐng)輸入目錄名稱(chēng)"

clearable

size="small"

prefix-icon="el-icon-search"

/div

!--樹(shù)的展示--

div

el-tree

:data="dirTreeOptions"

:props="defaultProps"

:expand-on-click-node="false"

:filter-node-method="filterNode"

ref="tree"

default-expand-all

@node-click="handleNodeClick"

icon-node-key="id"

:check-on-click-node="true"

!--隱藏的新增等圖標(biāo)--

spanslot-scope="{node,data}"@mouseenter="mouseenter(data)"@mouseleave="mouseleave(data)"

span{{node.label}}/span

div

iv-show="data.show"@click="addDial(node,data)"/

!--隱藏的下拉選--

el-dropdowntrigger="click"placement="right"@command="(command)={handleCommand(command)}"

iv-show="data.show"/

el-dropdown-menuslot="dropdown"

el-dropdown-itemcommand="a"重命名/el-dropdown-item

el-dropdown-itemcommand="b"刪除/el-dropdown-item

/el-dropdown-menu

/el-dropdown

/div

/span

/el-tree

/div

/el-col

2、組件對(duì)應(yīng)的JS

注意：樹(shù)的數(shù)據(jù)是從后端查詢(xún)回來(lái)的，保存在dirTreeOptions里面

script

exportdefault{

name:'reqmdoctree',

data(){

return{

//左側(cè)搜索框內(nèi)容

dirNameCn:'',

//目錄樹(shù)選項(xiàng)

dirTreeOptions:undefined,

defaultProps:{

children:"children",

label:"label"

//樹(shù)形菜單中有無(wú)子節(jié)點(diǎn)

yesChild:undefined,

//控制左側(cè)新增提示信息框

show:0,

//查詢(xún)需求文檔信息參數(shù)

queryParams:{

docNo:undefined,//文檔編號(hào)

docNameEn:undefined,//文檔英文名稱(chēng)

dirNo:undefined,//目錄編號(hào)

current:1,//當(dāng)前頁(yè)數(shù)

size:20//每頁(yè)顯示多少條

treeId:undefined,

methods:{

/**查詢(xún)需求目錄下拉樹(shù)結(jié)構(gòu)*/

getTreeselect(){

treeselect().then(response={

this.dirTreeOptions=response.data

//搜索值為過(guò)濾函數(shù)

filterNode(value,data){

if(!value)returntrue

returndata.label.indexOf(value)!==-1

//節(jié)點(diǎn)被點(diǎn)擊時(shí)的回調(diào)函數(shù)

handleNodeClick(data){

//console.log(data)

this.treeId=data.id

this.yesChild=data.children

this.queryParams.dirNo=data.id

this.getList()

//樹(shù)中三個(gè)點(diǎn)的事件

handleCommand(command){

if(command=='a'){

selectReqNo(this.treeId).then(response={

this.uuid=response.msg

getObjTree(response.msg).then(response={

this.form=response.data

this.open=true

this.title='修改需求文檔目錄配置表'

if(command=='b'){

if(this.yesChild!=undefined){

this.$notify.error({

title:'警告',

message:'此目錄下還有別的文件夾'

}else{

selectReqNo(this.treeId).then(response={

this.uuid=response.msg

this.$confirm('是否確認(rèn)刪除ID為'+this.uuid+'的數(shù)據(jù)項(xiàng)？','警告',{

confirmButtonText:'確定',

cancelButtonText:'取消',

type:'warning'

}).then(()={

returndelObjTree(this.uuid)

}).then(data={

this.getTreeselect()

this.msgSuccess('刪除成功')

}).catch(function(){

//左側(cè)新建目錄/文件

addDial(node,data){

//console.log(node,'---',data)

this.reset()

this.form.dirParentId=data.id

this.open=true

this.title='添加需求文檔目錄配置表'

//左側(cè)鼠標(biāo)懸浮展示圖標(biāo)

mouseenter(data){

this.