selected 如何给tr选中_vue设置表格里元素的选中与取消状态

问题没解决好，半夜觉都睡不着，爬起来换了一种思路折腾好了~

改变了一下数据结构，给每一行添加一个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)

}

v-if="column.status === 1" :class="{active: row.isChecked == columnIndex}" @click="select(row, column, rowIndex, columnIndex)">{{column.shiftName}}

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