vue element table 标题嵌套checkbox 全选不更新视图问题

 需要给el-table-column 添加key属性

具体代码：

<template>
  <div class="public-main">
    <div class="public-main-head">
      <el-button
        size="small"
        icon="el-icon-back"
        @click="onBack"
        plain
      >返回</el-button>
    </div>
    <div class="public-main-content">
      <div class="public-main-content-title">企业生产状态报备申请单</div>
      <el-form
        :model="formData"
        :rules="rules"
        key="ruleForm"
        ref="ruleForm"
        label-width="130px"
      >
        <el-row>
          <moft-fieldcard
            title="申请信息"
            style="margin-bottom:10px"
          >
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item
                  label="申请人"
                  prop="applicant"
                >
                  <el-input
                    v-model="formData.applicant"
                    placeholder="请输入申请人"
                    clearable
                  >
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item
                  label="联系电话"
                  prop="phone"
                >
                  <el-input
                    v-model="formData.phone"
                    placeholder="请输入联系电话"
                    clearable
                  >
                  </el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </moft-fieldcard>
          <moft-fieldcard
            title="企业生产状态"
            style="margin-bottom:10px"
          >
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item
                  label="报备状态"
                  prop="reportStatus"
                >

                  <el-select
                    v-model="formData.reportStatus"
                    placeholder="请选择"
                    clearable
                    style="width:100%"
                  >
                    <el-option
                      v-for="item in reportStatuss"
                      :key="item.code"
                      :label="item.name"
                      :value="item.code"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
          </moft-fieldcard>
          <moft-fieldcard
            title="危险源生产状态"
            style="margin-bottom:10px"
          >

            <el-table
              key="tableData"
              :data="formData.dangerousDatas"
              style="width: 100%"
            >
              <el-table-column
                prop="hazardName"
                label="危险源名称"
                align="center"
              >
              </el-table-column>
              <el-table-column
                prop="deviceName"
                label="设备名称"
                align="center"
              >
              </el-table-column>

              <el-table-column
                align="center"
                :key="checkOverhaulAll"
              >
                <template slot="header">
                  {{"检修报备"}}<el-checkbox
                    size="mini"
                    v-model="checkOverhaulAll"
                    @change="handlecheckOverhaulAllChange"
                  ></el-checkbox>
                </template>
                <template slot-scope="scope">
                  <el-checkbox
                    size="mini"
                    v-model="scope.row.overhaul"
                    @change="handleOverhaulChecked"
                  ></el-checkbox>
                </template>
              </el-table-column>

            </el-table>
          </moft-fieldcard>
        </el-row>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  props: {},
  components: {},

  data () {
    return {
      multipleSelection: [],
      formData: {
        dangerousDatas: [
          {
            hazardName: '危险源1',
            deviceName: '罐1',
            overhaul: null
          }
        ]
      },
      rules: {

      },
      checkOverhaulLen: 0,
      checkOverhaulAll: false
    }
  },
  computed: {},
  methods: {
    // 全选
    handlecheckOverhaulAllChange (val) {
      console.log(val)
      const newData = this.formData.dangerousDatas.map(item => {
        return {
          ...item,
          overhaul: val
        }
      })
      this.formData.dangerousDatas = newData
      if (val) {
        this.checkOverhaulAll = true
        this.checkOverhaulLen = newData.length
      } else {
        this.checkOverhaulAll = false
        this.checkOverhaulLen = 0
      }
    },
    handleOverhaulChecked (val) {
      this.checkOverhaulLen = val ? this.checkOverhaulLen + 1 : this.checkOverhaulLen - 1
      this.checkOverhaulAll = this.checkOverhaulLen === this.tableData.length
    },
    onBack () {
      this.$emit('evtBack')
    },
    submitForm (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          const params = {
            isActive: this.isActive
          }
          this.$emit('next', params)
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }
  }
}

</script>
<style lang="scss" scoped>
.public-main {
  flex: 1;
  overflow: hidden;
  &-head {
    padding: 10px;
    border-bottom: 1px solid #cdcdcd;
  }
  &-content {
    width: 1200px;
    flex: 1;
    border: 1px solid #f00;
    margin: auto;
    overflow-y: auto;
    @extend %scroller-bar;
    &-title {
      color: #666;
      font-size: 18px;
      font-weight: 700;
      text-align: center;
      padding: 30px 0;
    }
  }
}
</style>