el-tree組件,最后一級沒有children的一行顯示,顯示不下?lián)Q行展示

image.png
 <w-tree
            ref="treeRef"
            style="overflow: auto"
            :props="defaultProps"
            node-key="id"
            show-checkbox
            @check-change="handleCheckChange1"
            :default-checked-keys="initChecked"
            :data="treeData"
            @node-expand="handleNodeExpand"
          >
              <!--插槽判斷是否是最后一級-->
            <template #default="{ node, data }">
              <div v-if="isLastLevelNode(node)" class="last-level-node">
                <span class="w-tree-node__label">{{ data.name }}</span>
              </div>
              <span v-else>{{ data.name }}</span>
            </template>
          </w-tree>

javascript

export default {
  name: 'tree',
  data () {
    return {
      defaultProps: {
        label: 'name',
        isLeaf: 'leaf',
        children: 'children'
      },
      treeData: [],
      selectChecked: [],
      initChecked: [],
      selectChecked1: []
    }
  },
  methods: {
    async getTreeData () {
      return new Promise(async resolve => {
        let menuRes = await this.$Api.getTree()
        let { success = '', data = {} } = menuRes.data

        if (success) {
          let { jsxx = {}, checked = '', tree = [] } = data
          this.jsxx = jsxx
          let dataList = tree
          resolve(dataList)
        }
      })
    },
    isLastLevelNode(node) {
      // 檢查當(dāng)前節(jié)點(diǎn)是否為最后一級
      return !node.data.children || node.data.children.length === 0;
    },
    addClass() {
      // 獲取所有最后一級節(jié)點(diǎn)對應(yīng)的 .el-tree-node__children 元素
      let allLastNode = document.querySelectorAll('.last-level-node')
      allLastNode.forEach(function (element) {
        // 獲取 .el-tree-node__children 元素
        const childrenElement = element.parentNode.parentNode;
        // 添加 display: flex; 的行內(nèi)樣式
        childrenElement.style.display = 'inline-flex';
      });
    },
    handleNodeExpand(){
      this.$nextTick(()=>{
        this.addClass()
      })
    }
  },
  async created () {
    await this.getTreeData()
    this.addClass()
  }
}

參考:https://www.cnblogs.com/jocelyn11/p/18354581

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容