统计element UI两个el-tree的选中的数据

首先，需求包含美食和美景两个el-tree，底部统计的总项数包括父项。

 html:

<div

        v-loading="dataloading"

        class="app-content-left"

      >

        <h3>选择喜欢的</h3>

        <div class="custom-tree">

          <el-tree

            ref="tree"

            :data="data"

            show-checkbox

            node-key="id"

            :props="defaultProps"

            :default-expanded-keys="expanded"

            @check="handleCheckChange"

          >

            <span

              slot-scope="{ node, data }"

              class="custom-tree-node"

              :class="{ hasChildren: data.children }"

            >

              <el-tooltip

                class="item"

                effect="dark"

                :content="node.label"

                placement="right"

                :disabled="node.label && node.label.length < 16"

              >

                <span> {{ node.label | ellipsis(16) }} </span>

              </el-tooltip>

            </span>

          </el-tree>

          <el-tree

            ref="treezdy"

            :data="datazdy"

            show-checkbox

            node-key="id"

            :empty-text="''"

            :props="defaultProps"

            :default-expanded-keys="expanded"

            @check="handleCheckChangezdy"

          >

            <span

              slot-scope="{ node, data }"

              class="custom-tree-node"

              :class="{ hasChildren: data.children }"

            >

              <el-tooltip

                class="item"

                effect="dark"

                :content="node.label"

                placement="right"

                :disabled="node.label && node.label.length < 16"

              >

                <span> {{ node.label | ellipsis(16) }} </span>

              </el-tooltip>

            </span>

          </el-tree>

        </div>

        <div class="bottom-bar">

          <!-- 已选择 <span>{{ selection.length }}/{{ originData.length }}</span> 项 -->

          已选择 <span>{{ selectionAll.length }}/{{ originData.length }}</span> 项

        </div>

      </div>

script:

export default {

data() {

   return {

      dataloading: false, // 数据项的加载     

      expanded: [], // 默认不展开树 [-1]

      defaultProps: { // 不明白可以查看elementui的官方文档

        children: 'children',

        label: 'name',

      },

      data: [], // 接口获取的美食数据项

      datazdy: [], // 接口获取的美景数据项

      selection: [], // 美食选中的数据项

      selectionzdy: [], // 美景选中的数据项

      selectionAll: [], // 选择的数据项总和数字     

      originData: [],  // 所有美食美景数据项总项数字 

      gborws: [],  // 没有进行树格式化方法的美食数据

      zdyorws: [],  // 没有进行树格式化方法的美景数据

  }

}

}

 method:{}

// 数据项
    getdaItemList() {
      this.dataloading = true
      daItemList().then((response) => {
        // let rows = response.rows
        let rows = [], rowszdy = []
        response.rows.map(v=> {
          // 是否美景: （0否 1是）== 是否美食:(0:美食:1:不是美食)
          if (v.isCustom === '1') {
            rowszdy.push(v)
          } else if (v.isCustom === '0') {
            rows.push(v)
          }
        })
        if (rows.length > 0) {
          let father = {}
          rows.forEach((row) => {
            //   father[row.dataGroupId] = row.dataGroupName
            father[row.orderNum] = row.dataGroupName
          })
          for (let k in father) {
            rows.push({
              id: Number(k),
              name: father[k],
              orderNum: -1,
              dataGroupName: '美食',
            })
          }
          rows.push({
            id: -1,
            name: '美食',
            orderNum: -2,
            dataGroupName: '',
          })
          this.gborws = rows
          this.data = this.handleTree(rows, 'id', 'orderNum')
        }
        // 美景数据项
        if (rowszdy.length > 0) {
          let fatherzdy = {}
          rowszdy.forEach((row) => {
            fatherzdy[row.orderNum] = row.dataGroupName
          })
          for (let k in fatherzdy) {
            rowszdy.push({
              id: Number(k),
              name: fatherzdy[k],
              orderNum: -1,
              dataGroupName: '美景',
            })
          }
          rowszdy.push({
            id: -1,
            name: '美景',
            orderNum: -2,
            dataGroupName: '',
          })
          this.zdyorws = rowszdy
          this.datazdy = this.handleTree(rowszdy, 'id', 'orderNum')
        }

        // this.data = this.handleTree(response.rows, 'id', 'orderNum')
        this.originData = rows.concat(rowszdy)
        this.dataloading = false
      })
      .catch(() => {
        this.dataloading = false
      })
    },

handleCheckChange(checkedNodes, checkedKeys, halfCheckedNodes, halfCheckedKeys) {
      this.selection = this.$refs.tree.getCheckedNodes()
      this.selectionAll = this.selection.concat(this.selectionzdy)
      // console.log(this.selectionAll)
},
// 监听美景选择
handleCheckChangezdy(checkedNodes, checkedKeys, halfCheckedNodes, halfCheckedKeys) {
      this.selectionzdy = this.$refs.treezdy.getCheckedNodes()
      this.selectionAll = this.selection.concat(this.selectionzdy)
      // console.log(this.selectionAll)
},

/**
 * 构造树型结构数据
 * @param {*} data 数据源
 * @param {*} id id字段 默认 'id'
 * @param {*} parentId 父节点字段 默认 'parentId'
 * @param {*} children 孩子节点字段 默认 'children'
 * @param {*} rootId 根Id 默认 0
 */
export function handleTree(data, id, parentId, children, rootId, orderId = null) {
  id = id || 'id'
  parentId = parentId || 'parentId'
  children = children || 'children'
  rootId =
    rootId ||
    Math.min.apply(
      Math,
      data.map(item => {
        return item[parentId]
      })
    ) ||
    0
  //对源数据深度克隆
  const cloneData = JSON.parse(JSON.stringify(data))
  //循环所有项
  const treeData = cloneData.filter(father => {
    let branchArr = cloneData.filter(child => {
      //返回每一项的子级数组
      return father[id] === child[parentId]
    })
    branchArr.length > 0 ? (father.children = branchArr) : ''
    //返回第一层
    return father[parentId] === rootId
  })
  if (orderId) {
    treeData.forEach((item, fatherIndex, arr) => {
      let child = treeData[fatherIndex].children
      if (child && child.sort) {
        child.sort((a, b) => a[orderId] - b[orderId])
      }
    })
  }
  return treeData != '' ? treeData : data
}

获取选中的数据项数据

let getCheckedNodes = this.$refs.tree.getCheckedNodes().concat(this.$refs.treezdy.getCheckedNodes())
          this.checkNodes = getCheckedNodes.filter((item) => {
            // return !item.children.length
            return item
          })