VUE element-ui之el-tree树形控件获取最后一级节点(无子节点的节点)

步骤:

模板中定义ref

<el-tree
  ref="tree"
  node-key="code"
  show-checkbox
  class="el-tree"
  :indent="0"
  :data="routeList"
  :props="defaultProps"
  :highlight-current="true"
  :default-expand-all="true"
  :expand-on-click-node="false"
  :render-content="renderContent"
  :default-checked-keys="menuIds"
  @check="handleCheckChange"
  @node-expand="handleExpand"
/>

定义方法

centerResourceArr() {
      const resourceArr = this.$refs.tree.getCheckedNodes().filter(item => {
        return !item.childrens
      })
      this.datas = resourceArr.map(vls => { //此处为接口需要数据格式
        return {
          resourceId: vls.id,
          permissionState: 1
        }
      })
      return resourceArr //为最后一级节点node(无子节点)
    }

看效果
打印 console.log(this.centerResourceArr())

VUE element-ui之el-tree树形控件获取最后一级节点(无子节点的节点)_第1张图片

你可能感兴趣的:(elementui,js语法,vue,vue.js,javascript,前端)