快捷導(dǎo)航

elementui-樹(shù)形控件實(shí)現(xiàn)子節(jié)點(diǎn)右側(cè)添加圖標(biāo)和數(shù)據(jù)鼠標(biāo)放上去顯示文字效果

更新時(shí)間：2024年01月16日 10:41:03 作者：hat-ing

這篇文章主要介紹了elementui-樹(shù)形控件實(shí)現(xiàn)子節(jié)點(diǎn)右側(cè)添加圖標(biāo)和數(shù)據(jù)鼠標(biāo)放上去顯示文字效果,本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì),感興趣的朋友一起看看吧

1、代碼

 <el-tree
                        v-loading="nameLoding"
                        :data="data"
                        node-key="id"
                        :highlight-current="true"
                        empty-text="暫無(wú)數(shù)據(jù)"
                        :props="defaultPropsIndex"
                        default-expand-all
                        :filter-node-method="filterNodeIndex"
                        ref="treeName"
                        @node-click="getCheckedNodes"
                      >
                        <span
                          class="custom-tree-node"
                          slot-scope="{ node, data }"
                        >
                          <span>{{ node.label }}</span>
                          <span v-if="node.level > 1">
                            <span
                              style="
                                text-align: left;
                                width: 63px;
                                display: inline-block;
                              "
                            >
                              <el-tooltip
                                class="item"
                                effect="dark"
                                content="擁有的指標(biāo)權(quán)限個(gè)數(shù)"
                                placement="top"
                              >
                                <i
                                  title=""
                                  class="el-icon-s-marketing"
                                  style="color: rgb(103, 194, 58)"
                                ></i> </el-tooltip
                              ><span style="margin-right: 10%">{{
                                data.num
                              }}</span></span
                            >
                            <span
                              style="
                                text-align: left;
                                width: 71px;
                                display: inline-block;
                              "
                            >
                              <el-tooltip
                                class="item"
                                effect="dark"
                                content="擁有的訪問(wèn)權(quán)限個(gè)數(shù)"
                                placement="top"
                              >
                                <i
                                  class="el-icon-success"
                                  style="color: rgb(103, 194, 58)"
                                ></i> </el-tooltip
                              ><span style="margin-right: 10%">{{
                                data.sub_num
                              }}</span>
                            </span>
                          </span>
                        </span>
                      </el-tree>

css

.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  /* padding-right: 8px; */
  /* padding-right: 15%; */
}

效果圖：

到此這篇關(guān)于elementui-樹(shù)形控件實(shí)現(xiàn)子節(jié)點(diǎn)右側(cè)添加圖標(biāo)和數(shù)據(jù)，鼠標(biāo)放上去顯示文字的文章就介紹到這了,更多相關(guān)elementui樹(shù)形控件子節(jié)點(diǎn)右側(cè)添加圖標(biāo)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: