vue组件封装-下拉框-多选框-搜索框（一）

<template>
  <div>
    <!-- 标签组下拉选择 -->
    <div>
      <el-popover v-model="visible" placement="bottom" width="300">
        <el-input slot="reference" v-model="group" readonly placeholder="请选择标签组" @click.native="inputFocus()" />
        <div class="total">
          <span class="head">{{ title }}（{{ zongshu }}）</span>
          <el-input v-model="input2" placeholder="请输入内容" suffix-icon="el-icon-search" class="input1"
            @input="change(input2)" />
         <el-checkbox-group
          v-for="(item, key) in shuju"
          :key="key"
          v-model="checkList"
          readonly
          @change="hel"
        >
          <el-checkbox :label="item" style="margin-top: 10px" class="fx-y-center">
            <div class="Employee">
              <span class="fx-1">
                {{ item.groupName }}
              </span>
            </div>
          </el-checkbox>
        </el-checkbox-group>
        </div>
      </el-popover>
    </div>
  </div>
</template>
<script>

export default {
  props: {
    title: {
      type: String,
      default: ''
    },
    shuju: {
      type: Array,
      default: () => []
    },
    zongshu: {
      type: String,
      default: '0'
    }
  },
  data() {
    return {
      visible: false,
      checked: [],
      total: 0,
      params: {
        page: 1,
        size: 30,
        departmentID: ''
      },
      group: '',
      input2: '',
      groupdata: [],
      groupdata1: [],
      checkList:[]
    }
  },

  watch: {
    visible() {
      console.log(this.visible)
    }
  
  },
  mounted() {
  },
  methods: {
    inputFocus() {
      console.log('加载数据')
    },

    hel(data){
       console.log(data)
      const a = []
      for (const i in data) {
        a[i] = data[i].ID
      }
      console.log(a)
     
      this.$emit('changehello',a)
    },

    
    change(input2) {
      this.$emit('changeInp', input2)
    }
  }
}
</script>
<style scoped lang="scss">
.head {
  display: inline-block;
}

.input1 {
  display: block;
  width: 260px;
  margin-top: 20px;
  margin-bottom: 10px;
}

.head1 {
  overflow: hidden;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin-top: 10px;
  margin-right: 10px;
}

.total {
  height: 380px;
  overflow: auto;
}
</style>