【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="versionData"
            style="width: 100%;"
            border
            height="250"
          >
            <el-table-column align="center" label="迭代轮次">
              <template slot-scope="scope">
                {{ scope.row.iterationNumber }}
              </template>
            </el-table-column>
            <el-table-column align="center" label="任务进程">
              <template slot-scope="scope">
                {{ scope.row.progress }}
              </template>
            </el-table-column>
            <el-table-column align="center" label="模型版本">
              <template slot-scope="scope">
                {{ scope.row.modelVersion }}
              </template>
            </el-table-column>
            <el-table-column align="center" label="控制器版本">
              <template slot-scope="scope">
                {{ scope.row.controllerVersion }}
              </template>
            </el-table-column>
            <el-table-column align="center" label="工况表版本">
              <template slot-scope="scope">
                {{ scope.row.workTableVersion }}
              </template>
            </el-table-column>
          </el-table>
复制代码

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

data() {
    return {
      // 版本概览
      versionData: [],
      // 是否全选
      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.versionData.push({
          id: i + 1,
          iterationNumber: data[i],
          progress: '模型检查',
          modelVersion: '版本1',
          controllerVersion: '版本1',
          workTableVersion: '版本1'
        })
      }
    }
  }
复制代码

效果如图所示：

单选：

全选：