el-checkbox全选和自定义
<div
v-for="(item, idx) in selectList"
:key="item.name"
class="list"
:class="{ number: item.type === 'number' }"
>
<span class="title">{{ item.name }} </span>
<el-checkbox
:indeterminate="item.indeterminate"
v-model="item.selectAll"
@change="selectAll(item, idx)"
>全部</el-checkbox
>
<el-checkbox-group
v-model="item.value"
:class="{ jieClass: item.type === 'jie' }"
>
<el-checkbox
:label="child.prop"
v-for="child in item.children"
:key="child.label"
:checked="child.isSelect"
@change="changeLabel(child, item, idx)"
>{{ child.label }}</el-checkbox
>
</el-checkbox-group>
<div class="custom-div" v-if="item.type === 'number'">
<el-checkbox
v-model="item.customProduction"
@change="labelChange(idx, item)"
>自定义</el-checkbox
>
<div class="custom-div-show inner" v-show="item.opencustomProduction">
<input
type="number"
class="inputnumber inner"
placeholder="最小值"
v-model.number="item.minproduction"
/>-
<input
type="number"
class="inputnumber inner"
placeholder="最大值"
v-model.number="item.maxproduction"
/>
<div
class="custom-div-show-btn inner"
@click="clickAffirm(item, idx)"
>
确定
</div>
<div
class="custom-div-show-btn inner"
@click="clearCustom(item, idx)"
>
清除
</div>
</div>
</div>
</div>
jzAreaList: {
name: '总建筑面积(m²)',
type: 'number',
value: [],
customProduction: false,
opencustomProduction: false,
indeterminate: false,
selectAll: false,
maxproduction: '',
minproduction: '',
children: [
{ label: '10000以下', prop: { max: 10000 }, isSelect: false },
{
label: '10000-50000',
prop: { min: 10000, max: 50000 },
isSelect: false
},
{
label: '50000-100000',
prop: { min: 50000, max: 100000 },
isSelect: false
},
{
label: '100000-200000',
prop: { min: 100000, max: 200000 },
isSelect: false
},
{ label: '200000以上', prop: { min: 200000 }, isSelect: false }
]
},
selectAll(item, idx) {
item.indeterminate = false
if (item.selectAll) {
item.children.forEach((e) => {
e.type === 'number'
? item.value.push(e.label)
: item.value.push(e.prop)
})
} else {
item.value = []
}
this.param[idx] = JSON.parse(JSON.stringify(item.value))
},
labelChange(idx, item) {
item.opencustomProduction = item.customProduction ? true : false
let index = -1
this.param[idx].forEach((item, i) => {
if (item.type) {
index = i
}
})
if (!item.customProduction) {
index > -1 && this.param[idx].splice(index, 1)
} else {
if (index === -1 && item.minproduction) {
this.param[idx].push({
min: item.minproduction,
max: item.maxproduction,
type: 1
})
}
}
if (!this.customProductionIdx) {
this.customProductionIdx = idx
window.addEventListener('click', this.handleClick, { bubbles: true })
} else {
this.customProductionIdx = ''
window.removeEventListener('click', this.handleClick, { bubbles: true })
}
},