el-tree组件,最后一级没有children的一行显示,显示不下换行展示

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) {
      // 检查当前节点是否为最后一级
      return !node.data.children || node.data.children.length === 0;
    },
    addClass() {
      // 获取所有最后一级节点对应的 .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; 的行内样式
        childrenElement.style.display = 'inline-flex';
      });
    },
    handleNodeExpand(){
      this.$nextTick(()=>{
        this.addClass()
      })
    }
  },
  async created () {
    await this.getTreeData()
    this.addClass()
  }
}

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

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容