vue通過(guò)element樹(shù)形控件實(shí)現(xiàn)樹(shù)形表格
更新時(shí)間：2021年11月23日 15:13:56 作者：一只小木頭.
這篇文章主要為大家介紹了vue?element樹(shù)形控件實(shí)現(xiàn)樹(shù)形表格，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助
在vue中通過(guò)element樹(shù)形控件來(lái)實(shí)現(xiàn)樹(shù)形表格的效果
通過(guò)縮進(jìn)來(lái)實(shí)現(xiàn)近似樹(shù)形表格的效果
實(shí)現(xiàn)效果圖
安裝依賴(lài)
$ npm install element-plus --save
自定義樹(shù)形控件
分析圖中控件分布，每個(gè)參數(shù)都有固定的width，通過(guò)width讓數(shù)值達(dá)到對(duì)齊的效果
代碼主要通過(guò)renderContent函數(shù)來(lái)自定義樹(shù)形控件
<template>
<div class="mytree">
<el-tree
:data="tree_data"
:props="defaultProps"
@node-click="handleNodeClick"
indent="0"
:render-content="renderContent"
></el-tree>
</div>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue'
export default defineComponent({
components: {},
data() {
return {
tree_data: [
{
// type:1,
label: 'notice-id1',
children: [
{
label: ['衛(wèi)星名稱(chēng)代號(hào)','ZOHREH-2'],
},
{
label: ['組織機(jī)構(gòu)','IRN'],
},
{
label: ['頻率范圍','10950-1450'],
},
{
label: '[上行]beam名稱(chēng)',
children: [
{
label:['name','RS49'],
},
{
label:['freq_min','10950'],
},
{
label:['freq_max','14500'],
},
{
label:[]'group('+'3'+')','']
children:[
{
label:['10600361','10950','11200','0']
},
{
label:['10600361','10950','11200','0']
},
{
label:['10600361','10950','11200','0']
}
]
}
]
},
],
},
],
defaultProps: {
children: 'children',
label: 'label',
},
}
},
method:{
// 自定義樹(shù)形控件函數(shù) node代表每個(gè)節(jié)點(diǎn)
renderContent(h,{node,data,store}){
// div代表樹(shù)形控件的一行，div中包含三個(gè)span標(biāo)簽
// 判斷節(jié)點(diǎn)的label數(shù)組數(shù)量，通過(guò)三目運(yùn)算來(lái)選擇class
// 設(shè)置class來(lái)控制樹(shù)形控件進(jìn)行對(duì)齊
return h('div',[
h('span', {class:node.label.length === 2 ? 'nodeStyle':'groupStyle'},node.label[0]),
h('span', {class:'groupStyle'},node.label[1]),
h('span',{class:node.label.length === 2 ? 'nodeStyle':'groupStyle'},node.label.length === 2 ? '':node.label[2])
]);
},
}
})
</script>
<style lang="scss" scoped>
.nodeStyle{
width:110px;
display:inline-block;
text-align:left;
}
.groupStyle{
width:150px;
display:inline-block;
text-align:left;
}
</style>
其他實(shí)現(xiàn)
Element-ui實(shí)現(xiàn)樹(shù)形控件節(jié)點(diǎn)添加圖標(biāo)
總結(jié)
樹(shù)形表格主要通過(guò)element的樹(shù)形控件的自定義函數(shù)renderContent結(jié)合css來(lái)實(shí)現(xiàn)
本篇文章就到這里了，希望能夠給你帶來(lái)幫助，也希望您能夠多多關(guān)注腳本之家的更多內(nèi)容!
相關(guān)文章
VUE 實(shí)現(xiàn)復(fù)制內(nèi)容到剪貼板的兩種方法
這篇文章主要介紹了VUE 實(shí)現(xiàn)復(fù)制內(nèi)容到剪貼板功能，本文通過(guò)兩種方法，給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下2019-04-04
本文主要介紹了Vue3中列表拖拽排序的實(shí)現(xiàn)示例，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-06-06
vue打印功能實(shí)現(xiàn)的兩種方法總結(jié)
在項(xiàng)目中,有時(shí)需要打印頁(yè)面的表格,所以下面這篇文章主要給大家介紹了關(guān)于vue打印功能實(shí)現(xiàn)的兩種方法,以及批量打印的完整代碼,需要的朋友可以參考下2021-06-06
這篇文章主要介紹了vue之el-form表單校驗(yàn)以及常用正則，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-05-05
這篇文章主要為大家介紹了vue中 this.$set的使用，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助2021-11-11
解決VantUI popup 彈窗不彈出或無(wú)蒙層的問(wèn)題
這篇文章主要介紹了解決VantUI popup 彈窗不彈出或無(wú)蒙層的問(wèn)題。具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-11-11
vue2.0+elementui實(shí)現(xiàn)一個(gè)上門(mén)取件時(shí)間組件
這篇文章主要給大家介紹了關(guān)于vue2.0+elementui實(shí)現(xiàn)一個(gè)上門(mén)取件時(shí)間組件的相關(guān)資料,用于預(yù)約上門(mén)服務(wù)時(shí)間 看到網(wǎng)上有很多亂七八糟的代碼,看著頭疼,于是自己寫(xiě)了一個(gè)簡(jiǎn)單的,需要的朋友可以參考下2024-02-02
vue實(shí)現(xiàn)web滾動(dòng)條分頁(yè)
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)web滾動(dòng)條分頁(yè)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
本文主要介紹了Vue?中v-model的完整用法及原理，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08
element-ui中導(dǎo)航組件menu的一個(gè)屬性:default-active說(shuō)明
這篇文章主要介紹了element-ui中導(dǎo)航組件menu的一個(gè)屬性:default-active說(shuō)明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-05-05