el-checkbox點擊無法回顯

問題:動態賦予el-checkbox給isChecked屬性時候，前端樣式不生效

原因：前端添加checked屬性， vue並沒有添加get set方法，因此，監聽不到checked值變化，進而不能更新view。

方案：
用set方法

 this.$set(item2, 'isChecked', true)

<!--
 * @Author:wht
 * @Date: 2021-04-25 14:44:03
 * @LastEditTime: 2021-06-09 16:20:20
 * @LastEditors: Please set LastEditors
 * @Description: 多選
 * @FilePath: /donghuang/src/components/CheckSelect/CheckMulti.vue
-->
<template>
  <div class="hangeFlod">
    <div class="multi-check-item" v-if="childObj.items">
      <span class="checkTitle">{{ childObj.param_name }}</span
      >：
      <div class="foldDiv" id="foldDiv">
        <el-checkbox
          class="mr20 noLimit"
          v-model="childObj.isChecked"
          :label="childObj.param_name"
          :value="childObj.param_code"
          @change="handlerChange(1, childObj, $event)"
          border
          size="small"
          >不限</el-checkbox
        >
        <div
          class="muti-sum-wrap multi-check-item"
          style="display:inline-block"
        >
          <el-checkbox
            v-model="child.isChecked"
            @change="handlerChange(2, childObj, $event)"
            v-for="(child, index2) in childObj.items || []"
            :key="child.value + index2"
            :label="child.code"
            border
            size="small"
            >{{ child.value }}</el-checkbox
          >
        </div>
      </div>
      <span class="foldBtn" v-if="childObj.items && childObj.items.length > 6"
        >展開</span
      >
    </div>
  </div>
</template>

<script>
export default {
  props: {
    dataObj: {
      //數據集合
      type: Object,
      required: true
    }
  },
  data() {
    return {
      childObj: {}
    }
  },
  watch: {
    dataObj: {
      handler: function(newval, oldval) {
        this.childObj = newval
        this.childObj.items.forEach((item2, index2) => {
          if (
            this.childObj.checkedList &&
            this.childObj.checkedList.length > 0
          ) {
            this.childObj.checkedList.forEach((item3, index3) => {
              if (item2.code == item3) {
                this.$set(item2, 'isChecked', true)
              }
            })
          }
        })
      },
      //立即執行
      immediate: true
    }
  },

  computed: {
    getDataList() {
      let childList = []
      this.childObj.items.forEach((child, index2) => {
        if (child.isChecked) {
          childList.push(child.code)
        }
      })
      return childList
    }
  },
  created() {},
  mounted() {
    this.$nextTick(() => {
      $('.hangeFlod').on('click', '.foldBtn', function() {
        let nowStatus = $(this).html()
        if (nowStatus == '展開') {
          $(this).html('收起')
          $(this)
            .prev()
            .css('height', 'auto')
        } else {
          $(this).html('展開')
          $(this)
            .prev()
            .css('height', '42px')
        }
      })
    })
  },
  methods: {
    /**
     * 類型   當前數據  事件
     */
    handlerChange($type, $row, $event) {
      let isChecked = !$event.target ? $event : $event.target.checked
      if ($type === 1) {
        $row.items.forEach(item => {
          if (isChecked) {
            this.$set(item, 'isChecked', !isChecked)
          } else {
            this.$set(item, 'isChecked', isChecked)
          }
        })
      }
      const checkCount = $row.items.reduce((prev, cur) => {
        let check = 0
        if (cur.isChecked === undefined || cur.isChecked == false) {
          check = 0
        } else {
          check = +cur.isChecked
        }
        return prev + +check
      }, 0) //統計選擇的次數
      this.$set($row, 'isChecked', checkCount && checkCount > 0 ? false : true)
      this.$emit('change', this.getDataList, $row.param_code)
    }
  }
}
</script>
<style lang="scss" scoped>
.noLimit {
  min-width: 100px;
}

.checkTitle {
  display: inline-block;
  min-width: 60px;
  text-align: justify;
  text-align-last: justify;
  box-sizing: border-box;
  color: #666;
  font-size: 14px;
}

.el-checkbox {
  margin-right: 20px;
}

.el-checkbox.is-bordered.el-checkbox--small .el-checkbox__label {
  min-width: 50px;
  font-size: 13px;
}
.el-checkbox.is-bordered.el-checkbox--small {
  background: #fff;
}
.foldDiv {
  display: inline-flex;
  width: 75%;
  height: 42px;
  overflow: hidden;
}
.muti-sum-wrap {
  .el-checkbox.is-bordered.el-checkbox--small {
    min-width: 100px;
    margin-bottom: 10px;
  }
  .el-checkbox.is-bordered + .el-checkbox.is-bordered {
    margin-left: 0;
  }
}
.foldBtn {
  font-size: 13px;
  cursor: pointer;
  color: #5992e1;
  user-select: none;
}
</style>