select 下拉多选菜单

 由于elementui 下拉多选是叠加的一个状态  项目要求是选中长度总数  

最开始打算最暴力的 直接获取DOM操作改文字

但是打印一直都是选两项的时候  一直出不来+1的这个span的结点 ；选3项以上，才会出来+2的span结点，有谁知道的可以告知下

然后就自己根据现有需求重新写个极简的备着

 

<style scoped lang="scss">
    .select-div {
        width: 100%;
        margin: 0 auto;
        position: relative;
        .select-label {
            position: absolute;
            left: 0;
            top: 0;
            color: #606266;
            text-align: right;
            padding: 0 12px 0 0;
            height: 24px;
            line-height: 24px;
            overflow: hidden;
        }
        .select-input {
            height: 24px;
            background-color: #FFF;
            background-image: none;
            border-radius: 4px;
            border: 1px solid #DCDFE6;
            position: relative;
            .input-value {
                width: calc(100% - 24px - 5px - 8px);
                height: 24px;
                padding: 0 5px 0 8px;
                cursor: pointer;
                .init-se {
                    line-height: 24px;
                    color: #C0C4CC;
                }
                .txt-box {
                    span {
                        color: #909399;
                        padding: 1px 8px;
                        float: left;
                        margin: 2px 8px 2px 0;
                        display: flex;
                        max-width: 100%;
                        -webkit-box-align: center;
                        -ms-flex-align: center;
                        align-items: center;
                        border-width: 1px;
                        border-style: solid;
                        border-radius: 4px;
                        -webkit-box-sizing: border-box;
                        box-sizing: border-box;
                        border-color: transparent;
                        background-color: #f0f2f5;
                        display: -webkit-box;
                        display: -ms-flexbox;
                        display: flex;
                    }
                }
            }
            .input-suffix-icon {
                position: absolute;
                right: 5px;
                top: 0;
                width: 24px;
                height: 24px;
                text-align: center;
                overflow: hidden;

                i {
                    color: #C0C4CC;
                    font-size: 14px;
                    line-height: 24px;
                }
            }
            .select-drow {
                position: absolute;
                left: 0;
                top: 25px;
                z-index: 1001;
                border: 1px solid #E4E7ED;
                border-radius: 4px;
                background-color: #FFF;
                -webkit-box-shadow: 0 2px 12px 0 rgba(0, 255, 0, .1);
                box-shadow: 0 2px 12px 0 rgba(0, 255, 0, .1);
                -webkit-box-sizing: border-box;
                box-sizing: border-box;
                margin: 5px 0;
                width: 100%;
                max-height: 200px;
                overflow: auto;
                ul {
                    margin: 0;
                    padding: 0;
                    li{
                        width: calc(100%- 40px);
                        margin: 0 auto;
                        overflow: hidden;
                        list-style: none;
                        padding: 0 20px;
                        height: 34px;
                        line-height: 34px;
                        font-size: 14px;
                        cursor: pointer;
                        color: #606266;
                        &:hover {
                            background: #E4E7ED;
                        }
                        span {
                            width: calc(100% - 24px - 5px );
                            &.check-color {
                                color: #409EFF;
                                font-weight: bold;
                            }
                        }
                        i {
                            float: right;
                            height: 34px;
                            line-height: 34px;
                            margin-left: 5px;
                            width: 24px;
                            &.icon-color {
                                color: #409EFF;
                                font-weight: bold;
                            }
                        }
                    }
                }
            }
        }

    }
</style>
<template>
    <div class="select-div" @click.stop>
        <div class="select-label"
             :style="{ width: textWidth+'px'}">{{label}}
        </div>
        <div class="select-input"
             :style="{ marginLeft: labelWidth + 'px' }">
            <div class="input-value" @click="handleInput">
                <div class="init-se" v-if="valueCheck.length===0">
                    请选择
                </div>
                <div class="txt-box" v-if="valueCheck.length>0">
                    <span>{{valueCheck[0].itemName}}</span>
                    <span>{{valueCheck.length}}</span>
                </div>
            </div>
            <div class="input-suffix-icon">
                <i  :class="downTrue ? 'el-icon-arrow-up': 'el-icon-arrow-down'"></i>
            </div>
            <div class="select-drow" v-if="downTrue">
                <ul>
                    <li v-for="(item, index) in option" :key="index" @click="handleLiClick(item, index)">
                        <i class="el-icon-check icon-color" v-if="numArray.includes(index)"></i>
                        <span :class="[numArray.includes(index) ?  'check-color': '']">{{item.itemName}}</span>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>

<script>
  export default {
    name: 'multiple-select',
    props: {
      option: {
        type: Array,
        default: []
      },
      labelWidth: {
        type: String,
        default: '70'
      },
      label: {
        type: String,
        require: true
      }
    },
    watch: {
      // valueCheck: {
      //   handler(val, oldVal = {}) {
      //
      //   },
      //   immediate: true,
      //   deep: true
      // }
    },
    computed: {
      textWidth() {
        return this.labelWidth - 12
      }
    },
    data() {
      return {
        valueCheck: [],// 存放选中的项
        numArray: [], //控制选中 li的颜色
        downTrue: false
      }
    },
    created() {

    },
    mounted() {
      document.body.addEventListener('click', () => {
        this.downTrue = false;
      }, false);
    },
    methods: {
      handleLiClick(val, index) {
        let res = this.valueCheck.find((valF)=>{
          return val.itemName === valF.itemName;
        })
        if(res){
          let num = this.valueCheck.findIndex((valInd)=>{
            return val.itemName === valInd.itemName;
          });
          this.valueCheck.splice(num,1);
          this.numArray.splice(num,1);
        } else {
          this.valueCheck.push(val);
          this.numArray.push(index);
        }
        this.$emit('select-check', this.valueCheck);
      },
      handleInput() {
        this.downTrue  = !this.downTrue;
      }
    }
  }
</script>