<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>
vue组件封装-下拉框-多选框-搜索框(一)
于 2022-05-27 16:11:15 首次发布