collapse嵌套checkbox-group checkbox

所有的主项目有一个数据从一个接口返回一个数组,数组中有一项封装了子项的数据,是一个数组,这需要嵌套的去从第一个数组
返回是这样的数据结构:

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"
      ]
    }
  ]
}
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值