<template>
  <el-tree-select
    v-model="valueStrictly"
    :data="props.treeData"
    multiple
    :render-after-expand="false"
    show-checkbox
    check-strictly
    check-on-click-node
  />
</template>

<script setup>
import { onMounted, watch } from 'vue';

const valueStrictly = ref([])
let span = document.createElement("span")

const props = defineProps({
  treeData: []
})

let handleChange = (val)=> {
  if(val.length > 2){
    span.setAttribute('style', "display: inline-block");
    span.innerHTML = `+${val.length - 2}`
  }else{
    span.setAttribute('style', 'display:none')
  }
}

onMounted(()=> {
  span.setAttribute('class', 'numCounter')
  document.querySelector('.el-select .el-select-tags-wrapper').appendChild(span)
})
watch(()=> valueStrictly.value, (val)=> {
  let values = toRaw(val)
  handleChange(values)
})

</script>

<style>

.el-select {
  width: 300px;
}

.el-tag.el-tag--info:nth-child(n+3) {
  display: none;
}

.numCounter {
  position: absolute;
  top: 3px;
  background-color: #f4f4f5;
  border-color: #e9e9e6;
  color: #909399;
  border-radius: 5px;
}

</style>

