版權(quán)說明:本文檔由用戶提供并上傳,收益歸屬內(nèi)容提供方,若內(nèi)容存在侵權(quán),請進行舉報或認領(lǐng)
文檔簡介
elementelement樹型步驟條功能實現(xiàn)Element樹型步驟條功能實現(xiàn)
ElementUI是一套基于Vue.js的桌面端組件庫,其自帶的步驟條組件在實現(xiàn)一些復(fù)雜的操作流程時非常方便,但是有時由于業(yè)務(wù)需求,需要一個具有多層嵌套,并且具有層級結(jié)構(gòu)的步驟條,這時我們可以使用Element樹型步驟條組件。
以下是如何實現(xiàn)Element樹型步驟條的詳細步驟。
1.下載安裝ElementUI
在項目中加入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實現(xiàn),因此我們需要安裝vue-tree-list組件。
npminstallvue-tree-list
importTreeViewfrom'vue-tree-list'
3.創(chuàng)建一個tree-view組件
我們需要在項目中創(chuàng)建一個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>
如上代碼所示,我們在Vue組件中傳
溫馨提示
- 1. 本站所有資源如無特殊說明,都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
- 2. 本站的文檔不包含任何第三方提供的附件圖紙等,如果需要附件,請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
- 3. 本站RAR壓縮包中若帶圖紙,網(wǎng)頁內(nèi)容里面會有圖紙預(yù)覽,若沒有圖紙預(yù)覽就沒有圖紙。
- 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
- 5. 人人文庫網(wǎng)僅提供信息存儲空間,僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護處理,對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯,并不能對任何下載內(nèi)容負責。
- 6. 下載文件中如有侵權(quán)或不適當內(nèi)容,請與我們聯(lián)系,我們立即糾正。
- 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。
最新文檔
- 中職組導(dǎo)游知識測試專項試卷
- 小學數(shù)學計算題-脫式計算(學生版)
- 外研版英語七年級下冊全冊課件
- 小學二年級下科學《磁鐵的兩極》課件
- 小學語文五年級上冊寫字教學計劃
- 人教一年級上冊數(shù)學期末復(fù)習題(12篇)
- 首屆職工心理健康服務(wù)職業(yè)技能大賽題庫(試題及答案)
- 中醫(yī)學課件教學課件
- 多音字 課件教學課件
- 節(jié)能減碳量評估技術(shù)要求 第七部分:照明產(chǎn)品(征求意見稿)
- 論交通肇事罪的開題報告
- 2023年常州中考英語試卷及試卷分析
- 中國近現(xiàn)代史綱要(首都師范大學)超星爾雅學習通章節(jié)測試答案
- 長沙市建設(shè)工程項目報建流程表
- 糾正預(yù)防措施程序 Corrective and Preventive Action Procedure
- 全過程工程咨詢服務(wù)技術(shù)方案
- 拯救生命的小分子活性肽
- 某公司績效考核管理辦法
- (附答案)教練員脫崗培訓考核試卷
- 四年級語文上冊部編版第六單元 《習作:記一次游戲》(教學課件+教案+學案+練習)四年級語文上冊 部編版
- LY/T 1856-2009擠壓法空心刨花板
評論
0/150
提交評論