初次测试用的字符串形式,后期有改进可以直接设为boolean.

"1"是选中

"0"是未选中

前端页面代码:

       <template>
          <div>
            <div v-for="(item, index) in items" :key="index">
              <label>
                <input type="checkbox" v-model="item.xuanze" @change="handleChange(item)">
                {{ item.name }}
              </label>
            </div>
          </div>

比较经典,比较简单, 这里用item数组保存相关选项名字:

data():

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

比较经典的十选n,

method代码:

            handleChange(item) {
                item.xuanze = event.target.checked ? '1' : '0';
                const tableDataNames = [];
                for (let i = 1; i <= 11; i++) {
                    const num = i.toString();
                    tableDataNames.push('tableData' + num);
                    console.log( tableDataNames)
                }
                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);
                        }
                        break;
                    }
                }
            },

这里需要把item的值再赋给自己需要传给后端的值,
我这里是tableData1-10各自的"xuanze"字段,

选中的话返回1,无默认值是空可以设置默认值为0,选中后再取消选中的话是0

最后提交表单时候会把item数组里的值一 一赋值给自己表的值,

肯定还会有更优效的方法,欢迎有思路的同学评论讨论