【vue】根据checkbox选项动态往表格里加数据记录

HTML 里定义了一个checkbox多选框及一个table表格：

//多选框
 <el-checkbox
        v-model="checkAll"
        :indeterminate="isIndeterminate"
        @change="handleCheckAllChange"
      >
        全选
      </el-checkbox>
      <div style="margin: 15px 0;" />
      <el-checkbox-group
        v-model="checkedValues"
        @change="handleCheckedCitiesChange"
      >
        <el-checkbox
          v-for="(item,index) in checkList"
          :key="index"
          :label="item"
          border
        >
          {{ item }}
        </el-checkbox>
      </el-checkbox-group>

//表格
<el-table
          :data="tableData"
          style="width: 100%;"
          border
          height="250"
        >
          <el-table-column align="center" label="值1">
            <template slot-scope="scope">
              {{ scope.row.number1 }}
            </template>
          </el-table-column>
          <el-table-column align="center" label="值2">
            <template slot-scope="scope">
              {{ scope.row.number2 }}
            </template>
          </el-table-column>
          <el-table-column align="center" label="值3">
            <template slot-scope="scope">
              {{ scope.row.number3 }}
            </template>
          </el-table-column>
          <el-table-column align="center" label="值4">
            <template slot-scope="scope">
              {{ scope.row.number4 }}
            </template>
          </el-table-column>
          <el-table-column align="center" label="值5">
            <template slot-scope="scope">
              {{ scope.row.number5 }}
            </template>
          </el-table-column>
        </el-table>

js 的data里定义了html中用到的一些变量：

data() {
    return {
      tableData: [],
      // 是否全选
      checkAll: false,
      // 选中的项的集合
      checkedValues: [],
      // indeterminate 属性用以表示 checkbox 的不确定状态，一般用于实现全选的效果
      isIndeterminate: true,
      checkList: ['第1轮', '第2轮', '第3轮', '第4轮', '第5轮', '第6轮']
    }
  },

js的methods里实现全选及单选功能，并根据多选框选项动态更新表格数据；若选中其中一项或多项，则表格新增对应的一条或多条数据；如果全选，则新增全部数据：

methods: {
    // 全选
    handleCheckAllChange(val) {
      console.log(val)
      // 先清空表格历史数据
      this.versionData = []
      // 全选状态动态绑定
      this.checkedValues = val ? this.checkList : []
      this.isIndeterminate = false
      console.log(this.checkedValues)
      this.changeTableData(this.checkedValues)
    },

    // 单选
    handleCheckedCitiesChange(value) {
      console.log(value)
      // 先清空表格历史数据
      this.versionData = []
      // 获取多选框数据并绑定状态
      const checkedCount = value.length
      this.checkAll = checkedCount === this.checkList.length
      this.isIndeterminate = checkedCount > 0 && checkedCount < this.checkList.length
      this.checkedValues = value
      console.log(this.checkedValues)
      this.changeTableData(this.checkedValues)
    },

    // 动态更新表格数据
    changeTableData(data) {
      // 遍历选中的多选框，重组表格数据
      for (let i = 0; i < data.length; i++) {
       this.tableData.push({
          number1: data[i],
          number2: '1',
          number3: '2',
          number4: '3',
          number5: '4'
        })
      }
    }
  }

效果如图所示：

单选：

全选：