所有的主项目有一个数据从一个接口返回一个数组,数组中有一项封装了子项的数据,是一个数组,这需要嵌套的去从第一个数组
返回是这样的数据结构:
data:[{code: "202000221", name: "zhangsan", code1: "xymb", code2: "sass", id_r: "0", id_p: "0", blockList: [,…]},
{code: "202000221", name: "zhangsan", code1: "xymb", code2: "sass", id_r: "0", id_p: "0", blockList: [,…]},
{code: "202000221", name: "zhangsan", code1: "xymb", code2: "sass", id_r: "0", id_p: "0", blockList: [,…]}]
blockList 又是一个数组,里面又有一些数据信息。
<div v-if="curActiveTab === 'tab-2'" v-loading="loading">
<div v-show="westernBlockList.length > 0" class="western-content">
<w-collapse
v-for="(item, index) in westernBlockList"
:key="index"
class="western-main"
@change="expandSubItems(index)"
>
<w-collapse-item
:name="item.mbdm"
class="western-item"
>
<template slot="title">
<w-checkbox
:indeterminate="item.isIndeterminate"
v-model="item.checkAllWes"
@change="handleCheckAllChange(index)"
class="western-item-header"
>
<div class="title-desc">
<w-tooltip :content="`${item.blockNum}`">
<div slot="reference" class="title-desc-text text-1 text-ellipsis">
{{ item.blockNum}}
</div>
</w-tooltip>
</div>
</w-checkbox>
<i class="w-icon-triangle-bottom" v-bind:class="{ isExpanded: item.isIconExpanded }"></i>
</template>
<div class="western-pill">
<w-checkbox-group
v-model="item.wesCheckedPill"
class="western-pill-group">
<w-checkbox
v-for="(drug, drugIndex) in item.westernBlockList"
:key="drugIndex"
:label="drug.xmdm"
@change="handleCheckItemChange(index)"
class="drug-check">
<w-tooltip :content="`${drug.blockMc}`">
<span slot="reference">{{ drug.blockMc}}</span>
</w-tooltip>
</w-checkbox>
</w-checkbox-group>
</div>
</w-collapse-item>
</w-collapse>
</div>
<div v-if="westernBlockList.length === 0" class="diagnosis-content-dup">暂无数据</div>
</div>
// 获取选项,自定义一个方法,因为有多个标签,有多个接口返回不同的数据(这里只列举一种标签)
getCheckedAllItems(arr) {
let itemBlockObj = []
arr.filter(item => {
if (item.wesCheckedPill.length > 0) {
// 封装需要的参数push到一个新数组中
itemBlockObj.push({
name: item.name,
code: String(this.code), // 转换成字符串
personCode: Number(this.personCode), // 转换成数字
roomName: this.roomNum
})
}
})
return itemBlockObj
},
// 处理点击全选项
handleCheckAllChange(index) {
let { checkAllWes = false } = this.westernBlockList[index]
// 如果勾选全选,则子项的所有lable等于全选的v-model值
if (checkAllWes) {
this._drugCheckList = []
let _drugList = this.westernBlockList[index].mzCfMbMxList
if (_drugList) {
for (let item of _drugList) {
this._drugCheckList.push(item.xmdm)
}
}
this.westernBlockList[index].wesCheckedDrug = this._drugCheckList
} else {
this.westernBlockList[index].wesCheckedDrug = []
}
this.westernBlockList[index].isIndeterminate = false
}
// 处理点击每个子项
handleCheckItemChange(index) {
this.wesCheckedDrugCount = this.westernBlockList[index].wesCheckedPill.length // 选中的子项的数量
let wesDrugCount = this.westernBlockList[index].mzBlockList.length // mzBlockList是子项目的数据列表
// 如果选中的子项目和子项本来的数量相等就全选
this.westernBlockList[index].checkAllWes = this.wesCheckedDrugCount === wesDrugCount
// 将全选标志置为true
this.westernBlockList[index].isIndeterminate = this.wesCheckedDrugCount > 0 && this.wesCheckedDrugCount < wesDrugCount
}
// 参数的key是 mzBlockList 而 value就是调用this.getCheckedItems()方法返回的结果,是一个数组
// 参数的数据结构是这样的:
{
"mzBlockList": [
{
"name": "string",
"code": "string",
"personCode": "string",
"roomName": [
"string"
]
}
]
}
this.quoteParams = { mzBlockList: this.getCheckedItems() }
// 我选择两项的数据结构是这样的:
// 第一项主项下面选择两个子项 roomNum:就有两项
{
"mzBlockList": [
{
"name": "202000186",
"code": "1",
"personCode": "310115783675001",
"roomNum": [
"xy00078",
"xy00285"
]
},
// // 第二项主项下面选择一个子项 roomNum:就有一项
{
"name": "202000221",
"code": "1",
"personCode": "310115783675001",
"roomNum": [
"xy00036"
]
}
]
}