You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
87 lines
2.1 KiB
87 lines
2.1 KiB
<template>
|
|
<div v-loading="loading">
|
|
<el-checkbox
|
|
:indeterminate="isIndeterminate"
|
|
v-model="checkAll"
|
|
@change="handleCheckAllChange">全选</el-checkbox>
|
|
<div style="margin: 15px 0;"></div>
|
|
<el-checkbox-group v-if="boxList.length > 0" v-model="checkedList" @change="handleChange">
|
|
<div v-for="n in boxList" :key="n.itemId" class="mb10">
|
|
<el-checkbox :label="n.itemId">{{n.label}}</el-checkbox>
|
|
</div>
|
|
</el-checkbox-group>
|
|
<div v-else class="no-data">暂无数据</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'checkBox',
|
|
model: {
|
|
prop: 'value',
|
|
event: 'change'
|
|
},
|
|
props: {
|
|
value: {
|
|
type: Array,
|
|
default: () => []
|
|
},
|
|
list: {
|
|
type: Array,
|
|
default: () => []
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
boxList: [],
|
|
checkAll: false,
|
|
checkedList: [],
|
|
isIndeterminate: false,
|
|
pid: '',
|
|
loading: false
|
|
}
|
|
},
|
|
created() {
|
|
this.boxList = this.list.filter(item => item.itemType != 'inputRange')
|
|
console.log('cehck-bo----', this.list)
|
|
this.pid = this.list[0].itemGroupId
|
|
},
|
|
methods: {
|
|
handleCheckAllChange(val) {
|
|
|
|
this.checkedList = val ? this.boxList.map(item => item.itemId) : [];
|
|
this.isIndeterminate = false;
|
|
|
|
this.$emit('change', { list: this.filterArr(this.checkedList), pid: this.pid })
|
|
},
|
|
handleChange(value) {
|
|
console.log('value----', value)
|
|
let checkedCount = value.length;
|
|
this.checkAll = checkedCount === this.boxList.length;
|
|
this.isIndeterminate = checkedCount > 0 && checkedCount < this.boxList.length;
|
|
this.$emit('change', { list: this.filterArr(this.checkedList), pid: this.pid })
|
|
},
|
|
filterArr(arr) {
|
|
let list = []
|
|
arr.forEach(item => {
|
|
this.boxList.forEach(n => {
|
|
if (item === n.itemId) list.push(n)
|
|
})
|
|
})
|
|
return list
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.mb10 {
|
|
margin-bottom: 10px;
|
|
}
|
|
.no-data {
|
|
padding-top: 30px;
|
|
font-size: 14px;
|
|
text-align: center;
|
|
color: #999;
|
|
}
|
|
</style>
|