效果图
### html 代码结构
<div>
<el-checkbox-group v-model="checkedCities" @change="handleChange">
<div>
<el-checkbox v-for="(item,index) in cities" :label="index" :key="index">
<span>{{item.name}}</span>
<el-input class="input" placeholder="请输入排序" v-model="inputValue[index]" clearable
oninput="value=value.replace(/[^\d.]/g,'')"></el-input>
</el-checkbox>
</div>
</el-checkbox-group>
</div>
### data 初始化数据
cities: [{ name: '上海', moduleType: 1 },
{ name: '北京', moduleType: 2 },
{ name: '广州', moduleType: 3 },
{ name: '深圳', moduleType: 4 },
{ name: '深圳', moduleType: 5 },
{ name: '深圳', moduleType: 6 },
{ name: '深圳', moduleType: 7 },
{ name: '深圳', moduleType: 8 },
{ name: '深圳', moduleType: 9 },
],
citiesList: [], //复选框的选中内容
inputValue: [], //输入框的内容
moduleConfigList: null,//选中的参数
checkedCities: [], //绑定复选框的数据
### 函数方法
//复选框的操作和输出值
handleChange(value) {
console.log(value, ' this.cities');
this.citiesList = value;
},
//数据的处理逻辑
this.cities.forEach((item, index, arr) => {
this.moduleConfigList = this.checkedCities.map(items => {
return {
moduleType: arr[items].moduleType,
name: arr[items].name,
moduleSort: this.inputVlaue[items] //根据绑定复选框的数据,items作为索引,存输入框的内容到moduleConfigList数组对象里面
}
});
})
console.log(this.moduleConfigList, 'li');
let state = this.moduleConfigList.map(it => {
if (it.moduleSort >= 0) {
return true;
} else {
return false;
}
});
console.log(state , 'state '); //输出为 ['flase','flase'] 或者['true','true'] 或者 ['flase','true']
if (state.findIndex((target) => target === false) == -1) {
console.log("全是true");
this.addFun(data);
} else {
this.$message.error('勾选项需要输入排序');
}
判断数组中的对象全为false,或全为true
if (state.findIndex((target) => target === false) == -1) {
console.log("全是true");
}
判断数组中全是false
if (state.findIndex((target) => target === true) == -1) {
console.log("全是false");
}