簡易效果如圖,難點是判斷是否展開 來修改加號和減號
難點一:如何給沒有下屬節點的物件加一個頭像
<svg-icon v-if="data.children.length !== 0" icon-class= 'add' />
<svg-icon v-else icon-class="user1" />
<span>{{ data.name }}</span>判斷它是否有children 如果有則隱藏,如果沒有則則顯示 icon-class="user1" 這個圖示,此svg圖示可自己更改
難點二:如何消除組件默認的展開圖示
這是時候是可以正常顯示,但有一個小bug 就是組件默認圖示還是會有
我使用的方法是直接在組件上定義空的圖示 (記得修改為帶空格的字串)
<el-tree :data="list" :default-expand-all="true" icon-class=" ">難點三:判斷是否展開 來顯示不同的展開收起圖示
這是一個坑,難點在于如何獲取當前展開節點的資訊,我剛開始也找了半天,通過查找組件庫里的各種屬性,發現這個 #default="{ data }''
<template #default="{ data,node }">
<el-row
type="flex"
justify="space-between"
align="middle"
style="height: 40px; width: 100%"
>模板里面的 #default 并不只是接受一個引數data ,他可以接受三個引數分別是 data 屬性的陣列中該節點所對應的物件、節點對應的 Node、節點組件本身
這個時候我們就可以用 node這個物件中的各種屬性,其中就包括 expanded 這個屬性就是當前節點是否展開和關閉代碼如下
<el-col :span="20">
<svg-icon
v-if="data.children.length !== 0"
:icon-class="node.expanded ? 'minus' : 'add'"
/>
<svg-icon v-else icon-class="user1" />
<span>{{ data.name }}</span>
</el-col>如果當前節點有 children 則根據node.expanded 來判斷顯示加號還是減號 'minus' : 'add'" svg圖示可自行更改
這就是 我對怎么修改樹形控制元件中的圖示 的想法和做法,歡迎點贊轉發
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/328068.html
標籤：其他