基于vue element-ui的下拉选择器（多选） - 雯大侠

Z时代
2024-01-10
分类：综合
vue
基于vue element-ui的下拉选择器（多选）

<template>
  <el-select style="width: 100%;" v-model="selectArr" placeholder="请选择" multiple @change="changeSelect">
    <el-option :label="value" :value="value">
      <el-tree
        ref="tree"
        node-key="id"
        show-checkbox
        :data="treeData"
        :props="defaultProps"
        :default-checked-keys="defaultChecked"
        @check-change="getCurrentSelectArray"
        @current-change="getCurrentSelectArray"
      />
    </el-option>
  </el-select>
</template>
<script>
  export default {
    name: "el-tree-multi-select",
    data() {
      return {
        value: \'\', // options
        selectArr: []
      }
    },
    props: [\'treeData\', \'defaultProps\', \'defaultChecked\', \'defaultSelectArr\'],
    watch: {
      defaultSelectArr(){
        this.selectArr = this.defaultSelectArr
        this.initHandle()
      }
    },
    mounted() {
      this.selectArr = this.defaultSelectArr
      this.initHandle()
    },
    methods: {
      // 初始化值
      initHandle() {
        if (this.defaultSelectArr && this.defaultSelectArr.length > 0) {
          this.selectArr = this.defaultSelectArr
        } else {
          this.clearHandle() // 如果valueId不存在，清除选中
        }
        this.initScroll()
      },
        // 清除选中
        clearHandle(){
          this.selectArr = []
          this.clearSelected()
          this.$emit(\'getValue\',null)
        },
        // 清空选中样式
        clearSelected(){
          let allNode = document.querySelectorAll(\'#tree-option .el-tree-node\')
          allNode.forEach((element)=>element.classList.remove(\'is-current\'))
        },
      // 初始化滚动条
      initScroll() {
        this.$nextTick(() => {
          let scrollWrap = document.querySelectorAll(\'.el-scrollbar .el-select-dropdown__wrap\')[0]
          let scrollBar = document.querySelectorAll(\'.el-scrollbar .el-scrollbar__bar\')
          scrollWrap.style.cssText = \'margin: 0px; max-height: none; overflow: hidden;\'
          scrollBar.forEach(ele => ele.style.width = 0)
        })
      },
      getCurrentSelectArray() {
        var arr = this.$refs.tree.getCheckedNodes()
        this.selectArr = []
        var treeCheckedIdList = []
        // 赋值
        arr && arr.length && arr.forEach(item => {
          this.selectArr.push(this.$refs.tree.getNode(item.id).data[this.defaultProps.label])
          treeCheckedIdList.push(item.id)
        })
        this.$emit(\'getValue\',treeCheckedIdList.toString())
      },
      changeSelect(val) {
        // 设置当前节点的选中状态 val 为数组， 第二个参数为 是否选中
        var treeCheckedIdList = []
        this.treeData.forEach(item => {
          val.forEach(checked => {
            if (checked === this.$refs.tree.getNode(item.id).data[this.defaultProps.label]) {
              treeCheckedIdList.push(item.id)
            }
          })
        })
        this.$refs.tree.setCheckedKeys(treeCheckedIdList)
        this.$emit(\'getValue\',treeCheckedIdList.toString())
      },
    },
  }
</script>
<style scoped>
  .el-scrollbar .el-scrollbar__view .el-select-dropdown__item {
    height: auto;
    max-height: 274px;
    padding: 0;
    overflow: hidden;
    overflow-y: auto;
  }
  .el-select-dropdown__item.selected {
    font-weight: normal;
  }
  ul li>>>.el-tree .el-tree-node__content {
    height: auto;
    padding: 0 20px;
  }
  .el-tree-node__label {
    font-weight: normal;
  }
  .el-tree>>>.is-current .el-tree-node__label {
    color: #409EFF;
    font-weight: 700;
  }
  .el-tree>>>.is-current .el-tree-node__children .el-tree-node__label {
    color: #606266;
    font-weight: normal;
  }
</style>