elementelement樹型步驟條功能實(shí)現(xiàn)

elementelement樹型步驟條功能實(shí)現(xiàn)Element樹型步驟條功能實(shí)現(xiàn)

ElementUI是一套基于Vue.js的桌面端組件庫，其自帶的步驟條組件在實(shí)現(xiàn)一些復(fù)雜的操作流程時(shí)非常方便，但是有時(shí)由于業(yè)務(wù)需求，需要一個(gè)具有多層嵌套，并且具有層級(jí)結(jié)構(gòu)的步驟條，這時(shí)我們可以使用Element樹型步驟條組件。

以下是如何實(shí)現(xiàn)Element樹型步驟條的詳細(xì)步驟。

1.下載安裝ElementUI

在項(xiàng)目中加入ElementUI的方式很多，我們這里以NPM安裝為例，并在main.js中引入ElementUI組件庫。

npmielement-ui-S

importVuefrom'vue';

importElementUIfrom'element-ui';

import'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

2.安裝vue-tree-list組件

Element樹型步驟條通過vue-tree-list實(shí)現(xiàn)，因此我們需要安裝vue-tree-list組件。

npminstallvue-tree-list

importTreeViewfrom'vue-tree-list'

3.創(chuàng)建一個(gè)tree-view組件

我們需要在項(xiàng)目中創(chuàng)建一個(gè)tree-view組件，并在其中定義步驟條的數(shù)據(jù)結(jié)構(gòu)和樣式。

<template>

<div>

<TreeView

v-if="steps.length>0"

:data="steps"

:open-icon="'el-icon-folder-opened'"

:close-icon="'el-icon-folder'"

:disabled-icon="'el-icon-document'"

:open-all="true"

:default-checked="[]"

>

<template>

<el-button

v-if="isButton"

size="medium"

:type="type"

:disabled="disabled"

:icon="icon"

>

{{label}}

</el-button>

<divv-else>

{{label}}

</div>

</template>

</TreeView>

</div>

</template>

<script>

importTreeViewfrom'vue-tree-list'

exportdefault{

name:'TreeStep',

components:{

TreeView

},

props:{

steps:{

type:Array,

default(){

return[]

}

},

isButton:{

type:Boolean,

default:true

},

type:{

type:String,

default:'primary'

}

}

}

</script>

<style>

.el-button{

margin:5px0;

}

</style>

4.使用tree-view組件

在Vue組件中使用tree-view組件，傳入數(shù)據(jù)，即可生成Element樹型步驟條。

<template>

<div>

<tree-step:steps="steps"/>

</div>

</template>

<script>

importTreeStepfrom'@/components/TreeStep'

exportdefault{

components:{

TreeStep

},

data(){

return{

steps:[

{

label:'Step1',

children:[

{

label:'Step1-1',

children:[

{

label:'Step1-1-1'

},

{

label:'Step1-1-2'

}

]

},

{

label:'Step1-2',

isButton:false

}

]

},

{

label:'Step2',

children:[

{

label:'Step2-1',

icon:'el-icon-upload'

},

{

label:'Step2-2',

disabled:true

}

]

}

]

}

}

}

</script>

如上代碼所示，我們?cè)赩ue組件中傳