element tree 最多选择10个

一、代码实现：

<template>
  <div class='integral-group-select'>
    <section class='select-wrapper'>
      <el-tree
        ref="groupTreeRef"
        node-key="groupId"
        show-checkbox
        highlight-current
        default-expand-all
        check-strictly
        :props="defaultProps"
        :data="groupList"
        @check="handleTreeCheck">
      </el-tree>
    </section>
    <!-- 底部 -->
    <section class='goods-footer'>
      <span class='footer-split'></span>
      <span class='footer-btn' @click='cancelSelect'>取消</span>
      <span class='footer-btn confirm' @click='confirmSelect'>确定</span>
    </section>
  </div>
</template>

<script>
import { getGoodsGroupList } from '@/api/integral.js'
export default {
  name: 'integralGroupSelect',
  data () {
    return {
      groupList:[],
      chosenGroupList: [], // 选择的分组列表
      defaultProps: {
        children: 'children',
        label: 'groupName'
      },
    }
  },
  props: {
    // 上次用户已选择的分组列表
    selectedGroup: {
      type: Array,
      default () {
        return []
      }
    }
  },
  methods: {
    handleTreeCheck (currNode, checkedInfo) {
      let groupId = currNode.groupId
      let arr = checkedInfo.checkedKeys
      let index = arr.findIndex(id => id === groupId)
      if (arr.length > 10) {
        this.showWarning('最多只能选择10个分组')
        arr.splice(index, 1)
        this.$refs.groupTreeRef.setCheckedKeys(arr)
      }
    },
    confirmSelect () {
      let checkNodes = this.$refs.groupTreeRef.getCheckedNodes()
      this.chosenGroupList = checkNodes.map(item => {
        return {
          groupId: item.groupId,
          groupName: item.groupName
        }
      })
      this.$emit('confirm', this.chosenGroupList)
    },
    cancelSelect () {
      this.$emit('cancel')
    },
    getGroupList () {
      let params = {}
      getGoodsGroupList(params).then(res => {
        if (res.data.code === 200 && res.data.data) {
          this.groupList = res.data.data
        }
        // 回显选中的分组
        this.$nextTick(() => {
          this.$refs.groupTreeRef.setCheckedKeys(this.chosenGroupList.map(i => i.groupId))
        })
      })
    }
  },
  created () {
    this.chosenGroupList = JSON.parse(JSON.stringify(this.selectedGroup))
    console.log('=== chosenGroupList ===: ', this.chosenGroupList)
    this.getGroupList()
  }
}
</script>

<style scoped lang='stylus'>
.integral-group-select
  .select-wrapper
    border 1px solid #E9EAED;
    box-sizing border-box
    padding 20px
    scroll-bar()
    height 250px
  .goods-footer
    display flex 
    align-items center
    margin-top 12px
    .footer-split
      flex 1
    .footer-btn
      width: 80px;
      height: 32px;
      line-height 32px
      background: #FFFFFF;
      border: 1px solid #D0D0D1;
      border-radius: 4px;
      margin-left 16px
      cursor pointer
      font-size: 14px;
      color: #5A5C5F;
      text-align center
      &.confirm
        background #3377FE
        color #fff
        border-color #3377FE

</style>

二、效果：