elementui 复选框嵌套，默认选中的禁用，没选中的可再编辑

<template>
  <div>
    <el-form label-position="left">
      <title-tip title="能量隔离"></title-tip>
      <div v-if="energyListShow" class="tree-border">
        <el-row :gutter="30">
          <el-col :span="18">
            <el-form-item label="维修设备:" class="required" label-position="left">
              <el-select v-model="energyListId" placeholder="请选择维修设备" multiple
                         filterable :clearable="false"
                         @change="changeEnergy" style="width: 90%;"
                         v-default-select="[energyListId,energyListId]"
                         @keydown.native.delete.capture.stop.prevent
              >
                <el-option
                  v-for="item in energyList"
                  :key="`p_${item.id}`"
                  :checked="item.checked"
                  :disabled="item.disabled"
                  :label="`${item.deviceName}(${item.deviceNo})`"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6" v-if="!queryParams.energyListIdsDTO">
            <span style="float: right;" class="pointer" @click="deleteDevice"><i class="el-icon-delete"></i> 删除</span>
          </el-col>
        </el-row>
        <!-- 任务 -->
        <div class="deviceBox grid">
          <div v-for="(item,index) in deviceList" :key="item.id">
            <div class="deviceName">{{ item.deviceName }}({{ item.deviceNo }})</div>
            <div class="task grid">
              <div v-for="item1 in item.taskList" class="item">
                <el-checkbox-group v-model="item.taskIds"
                                   @change="taskChange($event,index)"
                >
                  <el-checkbox v-model="item1.id" :label="item1.id" :key="item1.id" :disabled="item1.disabled">
                    {{ item1.taskName }}
                  </el-checkbox>
                  <div v-if="item1.isolationPoint">
                    <el-link type="info" :underline="false">隔离点:</el-link>
                    <el-tag class="mr5 mb5" size="mini" type="success" v-for="items in item1.isolationPoint.split('；')">
                      {{ items }}
                    </el-tag>
                  </div>
                  <div v-if="item1.electricCabinetNo">
                    <el-link type="info" :underline="false">隔离设备:</el-link>
                    <el-tag class="mr5 mb5" size="mini" type="warning"
                            v-for="items in item1.electricCabinetNo.split(',')"
                    >{{ items }}
                    </el-tag>
                  </div>
                  <el-tooltip effect="dark" :content="item1.taskContent" placement="top-start">
                    <el-button type="text" icon="el-icon-view">详情</el-button>
                  </el-tooltip>
                </el-checkbox-group>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="p20" style="text-align: center;width: 100%;" v-if="!energyListShow">
        <span @click="energyListShow=true" class="pointer"><i class="el-icon-plus "></i> 添加隔离清单</span>
      </div>
    </el-form>
  </div>
</template>

<script>
import {
  getEnergyList,
  eiEnergyTaskByEnergyListId
} from '@/api/system/base/energyIsolation/energyList.js'

export default {
  props: ['queryParams'],
  name: 'EnergyListEdit',
  data() {
    return {
      energyListShow: false,
      energyList: [],
      deviceList: [],
      sendEnergy: [],
      energyListId: [],
      energyTaskIds: []
    }
  },
  watch:{
    queryParams:{
      handler(newVal){
        this.deviceList = this.energyListId = this.energyTaskIds = []; // 初始化前清空已选
        this.initEnergyListData()
      },
      deep:true
    }
  },
  created() {
    this.getEnergyList()
  },
  methods: {
    //删除device
    deleteDevice(){
      this.deviceList = this.energyListId = this.energyTaskIds = [];
      this.energyListShow=false;
    },
    // 获取能量隔离清单数据
    getEnergyList() {
      getEnergyList().then(res => {
        this.energyList = res.data || []
        this.initEnergyListData()
      })
    },
    // 获取清单对应的任务
    getTask(ids) {
      eiEnergyTaskByEnergyListId(ids).then(res => {
        let _task = res.data || []
        this.deviceList?.map((item, index) => {
          const items = []
          _task?.forEach(item1 => {
            if (item.id === item1.energyListId) {
              if (this.energyTaskIds.length) {
                if (this.energyTaskIds?.includes(item1.id)) {
                  item1.disabled = true
                  item1.checked = true
                }
              }
              items.push(item1)
            }
          })
          this.$set(item, 'taskList', items)
        })
      })
      // console.log('deviceList end',this.deviceList)
      // console.log('energyList end',this.energyList)
    },
    // 初始化能量隔离清单数据
    initEnergyListData() {
      if (this.queryParams.energyListIdsDTO && this.queryParams.energyListIdsDTO.length) {
        this.energyListShow = true
        const listIds = this.queryParams.energyListIdsDTO?.map(item => item.energyListId)
        const taskIds = this.queryParams.energyListIdsDTO?.map(item => item.taskIds)
        this.energyList?.map((item,index) => {
          let obj = {...item}
          this.queryParams.energyListIdsDTO?.map((item1,index1) => {
            if (Number(item.id) === Number(item1.energyListId)) {
              item.disabled = obj.disabled = true;
              obj.taskIds = item1.taskIds?this.deepClone(item1.taskIds) : []
              this.$set(this.deviceList,index1,obj)
            }
          })
        })
        this.energyListId = listIds
        this.energyTaskIds = [...taskIds]?.reduce((prev, next) => { //二维数组转一维数组
          return prev.concat(next)
        })
        if (listIds.length) {
          this.getTask(listIds)
        }
      }
    },
    async changeEnergy(val) {
      let checked = [];
      this.energyList?.map((items, index) => {
        val?.map(item => {
          if (Number(items.id) === Number(item)) {
            let obj = {
              id: item,
              deviceName: items.deviceName,
              deviceNo: items.deviceNo,
              taskIds: []
            }
            checked.push(obj) // 新增的时候直接用这个就行，修改的时候才使用$set,否则是空数组
            if(this.queryParams.energyListIdsDTO && this.queryParams.energyListIdsDTO.length){
              this.queryParams.energyListIdsDTO?.map(item1 => {
                if (Number(item) === Number(item1.energyListId)) {
                  obj.taskIds = this.deepClone(item1.taskIds)
                }
              })
              this.$set(this.deviceList,index,obj)
            }else{
              this.deviceList = checked;
            }
          }
        })
      })
      // console.log('this.deviceList',this.deviceList)
      if (val.length) {
        await this.getTask(val)
      }else{
        this.deviceList = [];
      }
    },
    taskChange(val, index) {
      this.$set(this.deviceList[index], 'taskIds', val);
    },
    validateEnergyList() {
      let sendEnergy = []
      let validate = true
      this.deviceList?.map(item => {
        const obj = {
          energyListId: item.id,
          taskIds: item.taskIds
        }
        sendEnergy.push(obj)
      })
      if (this.energyListShow) {
        if (sendEnergy.length === 0) {
          validate = false
          return false
        } else {
          sendEnergy?.map(item => {
            if (!item.taskIds || item.taskIds?.length === 0) {
              validate = false
              return false
            }
          })
        }
      }
      return {
        validate,
        sendEnergy
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.tree-border {
  border: 1px solid #e5e6e7;
  background: #FFFFFF none;
  border-radius: 4px;
  padding: 20px;
}

.el-form-item.required {
  position: relative;

  &::after {
    position: absolute;
    left: -10px;
    top: 7px;
    content: '*';
    color: red;
  }
}

.deviceName {
  font-size: 15px;
  color: #000;
  margin-bottom: 15px;
}

.grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: auto;
  grid-gap: 20px;
}

.deviceBox {
  & > div {
    padding: 10px;
    border-radius: 5px;
    background: #f7f7f7;
  }

  & .task .item {
    &:nth-child(odd) {
      border-right: 1px solid #ddd;
    }
  }

  .el-link.el-link--info {
    word-break: keep-all;
    white-space: nowrap;
    margin: 0 10px 5px 0;
  }
}
</style>

 

已封装的子组件，替换接口请求名字和判断条件关键字即可。

 

调用 

问题：控制台打印可看到数据，但类型是_oberserve，发送接口时数据为空

 

 解决方式： 同步执行方法里JSON.parse(JSON.stringify()) 转一次再赋值。