is similar to this selection method. I want to highlight the selected row. The most important thing is that what I want to achieve is dynamic. When I select a row, I want to highlight it
.
is similar to this selection method. I want to highlight the selected row. The most important thing is that what I want to achieve is dynamic. When I select a row, I want to highlight it
. my solution uses @ selection-change= "handleSelectionChange": row-style= "rowClass" . Take all the contents selected by checkbox in handleSelectionChange and save them in selectData, then monitor selectData to determine the location of selected rows in the table list, save all index in selectRow, and finally add background colors to the corresponding lines in rowClass
data(){
return {
selectRow:[],
selectData:[]
}
},
methods: {
//
handleSelectionChange(data) {
this.selectData = data;
},
//
rowClass({row, rowIndex}){
if(this.selectRow.includes(rowIndex)){
return { "background-color": "rgba(185, 221, 249, 0.75)" }
}
}
},
watch: {
selectData(data) {
this.selectRow = [];
if (data.length > 0) {
data.forEach((item, index) => {
this.selectRow.push(this.tableData.indexOf(item));
});
}
}
} 
row-class-name usage of table, calculate the className of the selected row based on selection
listening for SelectionChange events, modifying the selection array,
and then redrawing the chart with doLayout should be feasible