vue设置表格里元素的选中与取消状态

Question

最近做一个换班的需求，用自己的班次跟别人的班次交换，如图显示

需求描述：
1.显示文字的格子可以点击，选中添加高亮状态，当前格子高亮时其他格子取消选中(已实现)
2.图中每一行表示一个人的班次，选中自己班次的格子和要替换班次的格子保持高亮状态(已实现)
3.仅可选择两个班次(一个是自己的，另外一个是要替换的班次)

代码如下
data: {

        tableData: [
            [
                {
                    shiftName: '早1',
                    status: 1,
                    checked: false
                },
                {
                    shiftName: '早2',
                    status: 1,
                    checked: false
                },
                {
                    shiftName: '早3',
                    status: 2,
                    checked: false
                },
                {
                    shiftName: '早4',
                    status: 2,
                    checked: false
                },
                {
                    shiftName: '早5',
                    status: 1,
                    checked: false
                }
            ],
            [
                {
                    shiftName: '晚1',
                    status: 2,
                    checked: false
                },
                {
                    shiftName: '晚2',
                    status: 2,
                    checked: false
                },
                {
                    shiftName: '晚3',
                    status: 1,
                    checked: false
                },
                {
                    shiftName: '晚4',
                    status: 1,
                    checked: false
                },
                {
                    shiftName: '晚5',
                    status: 1,
                    checked: false
                }
            ],
            [
                {
                    shiftName: '夜1',
                    status: 1,
                    checked: false
                },
                {
                    shiftName: '夜2',
                    status: 2,
                    checked: false
                },
                {
                    shiftName: '夜3',
                    status: 2,
                    checked: false
                },
                {
                    shiftName: '夜4',
                    status: 2,
                    checked: false
                },
                {
                    shiftName: '夜5',
                    status: 1,
                    checked: false
                }
            ]
        ]
    },
    methods: {
        select(column, rowIndex, columnIndex) {
            this.tableData.forEach((item, index) => {
                item.forEach((item1, index1) => {
                    if (rowIndex === index) {
                        item1.checked = false
                    }
                })
            })
            column.checked = !column.checked
        }
    }
    <table>
    <tr v-for="(row, rowIndex) in tableData" :key="rowIndex">
        <td v-for="(column, columnIndex) in row" :key="columnIndex">
            <a href="javascript:;" class="cell"
               v-if="column.status === 1"
               :class="{active: column.checked}"
               @click="select(column, rowIndex, columnIndex)">{{column.shiftName}}</a>
        </td>
    </tr>
</table>
<style>
table {
    width: 500px;
    margin: 0 auto;
    border-collapse: collapse;
}
table tr td {
    text-align: center;
    padding: 15px 5px;
    border: 1px solid #eee;
}
table tr td .cell {
    display: block;
    color: #666;
    text-decoration: none;
}
table tr td .cell.active {
    background-color: #f00;
}
table tr td .cell:hover {
    text-decoration: underline;
}

</style>
我的问题：
1.每一行的格子除了选中当前格子取消其他格子的高亮状态，当前格子选中之后也要能取消选中(类似于jquery的toggle效果)，现在是当前选中的格子不能取消选中
2.限制只能选中两个格子，并且将这两个选中格子的数据存起来(要传给后端)

烦请大佬指导，感谢~

Answer 1

1. 2个变量保存2个下标(原班次，替换班次)。
2. click是检查columnIndex是否等于保存的2个下标。
3. true就清空，false就选中
4. 如果是false,检查点击的对象是别人的班次还是自己的，将columnIndex存入相应的变量
5. 提交时直接将2个变量的下标拿到，提取出要提交的数据传递给后台

Answer 2

问题没解决好，半夜觉都睡不着，爬起来换了一种思路折腾好了~
改变了一下数据结构，给每一行添加一个isChecked属性，用来控制格子的选中和取消选中状态，在每一个格子上添加行号和列号属性方便下面判断

       tableData: [
            {
                isChecked: -1,
                list: [
                    {
                        row: 0,
                        column: 0,
                        shiftName: '早1',
                        status: 1,
                        checked: false
                    },
                    {
                        row: 0,
                        column: 1,
                        shiftName: '早2',
                        status: 1,
                        checked: false
                    },
                    {
                        row: 0,
                        column: 2,
                        shiftName: '早3',
                        status: 2,
                        checked: false
                    },
                    {
                        row: 0,
                        column: 3,
                        shiftName: '早4',
                        status: 2,
                        checked: false
                    },
                    {
                        row: 0,
                        column: 4,
                        shiftName: '早5',
                        status: 1,
                        checked: false
                    }
                ]
            },
            {
                isChecked: -1,
                list: [
                    {
                        row: 1,
                        column: 0,
                        shiftName: '晚1',
                        status: 2,
                        checked: false
                    },
                    {
                        row: 1,
                        column: 1,
                        shiftName: '晚2',
                        status: 2,
                        checked: false
                    },
                    {
                        row: 1,
                        column: 2,
                        shiftName: '晚3',
                        status: 1,
                        checked: false
                    },
                    {
                        row: 1,
                        column: 3,
                        shiftName: '晚4',
                        status: 1,
                        checked: false
                    },
                    {
                        row: 1,
                        column: 4,
                        shiftName: '晚5',
                        status: 1,
                        checked: false
                    }
                ]
            },
            {
                isChecked: -1,
                list: [
                    {
                        row: 2,
                        column: 0,
                        shiftName: '夜1',
                        status: 1,
                        checked: false
                    },
                    {
                        row: 2,
                        column: 1,
                        shiftName: '夜2',
                        status: 2,
                        checked: false
                    },
                    {
                        row: 2,
                        column: 3,
                        shiftName: '夜3',
                        status: 2,
                        checked: false
                    },
                    {
                        row: 2,
                        column: 4,
                        shiftName: '夜4',
                        status: 2,
                        checked: false
                    },
                    {
                        row: 2,
                        column: 5,
                        shiftName: '夜5',
                        status: 1,
                        checked: false
                    }
                ]
            }

        ]
        
        select(row, column, rowIndex, columnIndex) {
            // 首先清空所有项的选中状态
            this.tableData.forEach((item, index) => {
                item.list.forEach((item1, index1) => {
                    item1.checked = false;
                })
            })
            // 将获取到数组里删掉取消选中的格子，因为要选择两个班次，也就是每一行里得保留一个格子不能删除，除非自己取消选中，所以多加了一个判断条件item.row === rowIndex
            aSelected.forEach((item, index) => {
                if (item.checked === false && item.row === rowIndex) {
                    aSelected.splice(index, 1)
                }
            })
            // 给当前选中项添加选中状态 如果已经选择2个就不让再添加
            if (columnIndex != row.isChecked) {
                if (aSelected.length === 2) {
                    alert('您已选择两个班次，是否申请换班？')
                    return false
                } else {
                    row.isChecked = columnIndex;
                    column.checked = true;
                    aSelected.push(column);
                }
                console.log(aSelected.length)
            } else {
                row.isChecked = -1;
                column.checked = false;
            }
            console.log(aSelected)
        }
        
 <table>
    <tr v-for="(row, rowIndex) in tableData" :key="rowIndex">
        <td v-for="(column, columnIndex) in row.list" :key="columnIndex">
            <a href="javascript:;" class="cell"
               v-if="column.status === 1"
               :class="{active: row.isChecked == columnIndex}"
               @click="select(row, column, rowIndex, columnIndex)">{{column.shiftName}}</a>
        </td>
    </tr>
</table>

目前问题已经解决，但办法肯定不是最好的，回头再看之前的代码和思路，感觉自己简直是智障，哈哈，如果有更好的办法和思路希望能留言分享，谢谢~