前端页面代码,比较简单,无非是一个数组存一些列名和其他数据

  <!--        项目复选框-->
        <template>
          <div class="checkbox-container">
            <template>
              <p class="green-text">
         下面是复选框的选项,
         items存data里
              </p>
            </template>
            <div v-for="(item, index) in items" :key="index" class="checkbox-item">
              <label>
                <el-checkbox type="checkbox" v-model="item.xuanze" @change="handleChange1(item)"/>
                {{ item.name }}
              </label>
            </div>
          </div>
        </template>

items数组放在data()里:

 data()  {
            return {

                items: [
                    {name: '1# ', xuanze: false},
                    {name: '2# ', xuanze: false},
                    {name: '3# ',xuanze: false},
                    {name: '4# ', xuanze: false},
                    {name: '5# ', xuanze: false},
                    {name: '6# ', xuanze: false},
                    {name: '7# ', xuanze: false},
                    {name: '8# ', xuanze: false},
                    {name: '9# ', xuanze: false},
                    {name: '10# ', xuanze: false},
                    {name: '11# ', xuanze: false}
                ]

}

这里我简单写了"xuanze"就是用户是否选择,默认为false,false就是不勾中该选项,true是勾中.

下面是页面交互的方法

 handleChange1(item) {
                // item.xuanze = event.target.checked;

                const tableDataNames = [];
                for (let i = 1; i <= 11; i++) {
                    const num = i.toString();
                    tableDataNames.push('tableData' + num+'1');
                }
                for (let i = 0; i < this.items.length; i++) {
                    if (item.name === this.items[i].name) {
                        const tableData = this[tableDataNames[i]];
                        if (tableData) {
                            tableData.xuanze = item.xuanze;
                            console.log(tableData.xuanze);
                            console.log(item.xuanze)
                        }
                        break;
                    }
                }
                // 确保复选框的选中状态正确地反映了 item.xuanze 的值
                const checkbox = event.target;
                if (checkbox.checked !== item.xuanze) {
                    checkbox.checked = item.xuanze;
                }
            },

逻辑很简单，就是遍历，给自己的表里一个一个存入是否选择的字段，

存入的是true或者false的boolean类型的

boolean类型需要划重点,因为这里是boolean所以后端传过来也要是boolean的

如果你是字符串传过来的,大概率会所有选项都被勾选,哪怕你传过来的是"false"字符串!

所以要手动把字符串转为boolean类型

才会正常进行"选项是否被选择"的回显.

至于字符串转boolean的js方法很多,我这里简单展示一种:

this.items[i].xuanze = tableDataArr[i].xuanze =formData.xuanze=== 'true' ? true : false;

因为用了中间数组items存入所有列表的"xuanze"字段,这里同样需要将数据库字段的值,再赋值给items才能正常进行回显.

总结:注意数据的格式即可,其他逻辑可自行增添.

        我写的也不一定完全没问题,有问题,有优化方案的同学可以在评论区相互交流,共同进步.