Vue.js 使用 el-checkbox-group 控制 el-table 数据

<template>
  <el-form-item label="\u7684\u4eba\u4fe1\u606f" prop="personalInfo">
    <el-checkbox-group v-model="checkedCities" @change="personChange">
      <el-checkbox v-for="(itemP,indexP) in customizeList" :key="indexP" :label="itemP.customizeId">{{itemP.itemLabel}}</el-checkbox>
    </el-checkbox-group>
    <el-table :data="personalList" style="padding-top: 20px">
      <el-table-column prop="customizeId" label="\u7684\u4eba\u4fe1\u606f\u540d\u79f0">
        <template slot-scope="scope">
          {{ customizeList.find(item => item.customizeId === scope.row.customizeId).itemLabel }}
        </template>
      </el-table-column>
      <el-table-column label="\u662f\u5426\u5fc5\u9009" prop="isRequired">
        <template slot-scope="scope">
          <el-switch v-model="scope.row.isRequired" active-color="#13ce66" inactive-color="#ff4949" active-value="1"
            inactive-value="0" active-text="\u662f" inactive-text="\u5426">
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column label="\u64cd\u4f5c">
        <template #default="scope">
          <el-button link type="danger" size="small" icon="el-icon-edit" circle
            @click.prevent="updatePersonalRow(scope.row,scope.$index)" />
<pre><code>      &lt;el-button link type=&quot;primary&quot; size=&quot;small&quot; icon=&quot;el-icon-delete&quot; circle
        @click.prevent=&quot;deletePersonalRow(scope.$index)&quot; /&gt;
    &lt;/template&gt;
  &lt;/el-table-column&gt;
&lt;/el-table&gt;
</code></pre>
  </el-form-item>
</template>
<script>
export default {
  data() {
    return {
      checkedCities: [], // \u9009\u62e9\u7684\u591a\u9009\u6846\u7684\u503c
      customizeList: [ // \u591a\u9009\u6846\u7684\u6570\u636e
        { customizeId: 1, itemLabel: '\u9009\u98791' },
        { customizeId: 2, itemLabel: '\u9009\u98792' },
        { customizeId: 3, itemLabel: '\u9009\u98793' }
      ],
      personalList: [] // \u5217\u8868\u4e2d\u7684\u6570\u636e
    };
  },
  methods: {
    personChange(checkedCities) {
      // \u589e\u52a0\u9009\u62e9\u7684\u591a\u9009\u6846\u7684\u6570\u636e
      checkedCities.forEach(checkedCity => {
        const selectedItem = this.customizeList.find(item => item.customizeId === checkedCity);
        if (selectedItem) {
          this.personalList.push(selectedItem);
        }
      });

      // \u5220\u9664\u53d6\u6d88\u9009\u62e9\u7684\u591a\u9009\u6846\u7684\u6570\u636e
      this.personalList = this.personalList.filter(item => checkedCities.includes(item.customizeId));
    }
  }
};
</script>