elementelement树型步骤条功能实现

elementelement树型步骤条功能实现

Element树型步骤条功能实现

ElementUI是一套基于Vue.js的桌面端组件库，其自带的步骤条组件

在实现一些复杂的操作流程时非常方便，但是有时由于业务需求，需

要一个具有多层嵌套，并且具有层级结构的步骤条，这时我们可以使

用Element树型步骤条组件。

以下是如何实现Element树型步骤条的详细步骤。

1.下载安装ElementUI

在项目中加入ElementUI的方式很多，我们这里以NPM安装为例，并

在main.js中引入ElementUI组件库。

npmielement-ui-S

importVuefrom'vue';

importElementUIfrom'element-ui1;

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

Vue.use(ElementUI);

2.安装vue-tree-list组件

Element树型步骤条通过vue-tree-list实现，因此我们需耍安装vue-tree-

list组件。

npminstallvue-tree-list

importTreeViewfrom'vue-tree-list'

3.创建一个tree-view组件

我们需要在项目中创建一个tree-view组件，并在其中定义步骤条的数

据结构和样式。

<template>

<div>

<TreeView

v-if="steps.length>0"

:data二"steps”

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

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

:disabled-icon=,nel-icon-document'"

:open-all=ntruen

:default-checked二"口"

>

<template>

<el-button

v-if="isButlon”

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:'TreeStep1,

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组件，传入数据，即可生成Element树型

步骤条。

<template>

<div>

<tree-step:steps="steps”/〉

</div>

</template>

<script>

importTreeStepfrom'(a/components/TreeStep,

exportdefault{

components:{

TreeStep

}，

data(){

return{

steps:[

(

label:'Step

children:[

(

label:'Stepl-l1,

children:[

(

label:Step1-1-1'

｝，

label:Step1-1-21

1

},

(

label:'Step1-2',

isButton:false

)

J

},

(

label:'Step2',

children:[

{

label:*Step2-T,

icon:'el-icon-upload'

},

(

label:'Step2-2',

disabled:true

i

1

)

J

)

</script>

如上代码所示，我们在Vue组件中传入steps数据结构，即可生成层级

结构的Element树型步骤条。

总结

通过以上步骤，我们可以非常方便地实现Element树型步骤条的功能。

如果你想要进一步优化