Requirements: The check box when the row is selected for el-table is also selected. The corresponding changes in the row are triggered when the check box is selected (there are two steps in total)
step:
Step 1: Trigger the selection or cancel of the check box when clicking the row;
Step 2: When clicking the check box, trigger the change of the corresponding row (the key to the question is how to get the rows selected by the check box)
1. Trigger the selection or cancel of the check box when clicking the row
// <template>
<el-table
class="right-panel-table"
:data="tableData"
@selection-change="(val) => handleSelectionChange(val,'ischeckboxTick')"
ref="multipleTable"
v-loading="planLoading"
@cell-mouse-enter="handleMouseEnter"
@cell-mouse-leave="handleMouseOut"
@row-click="(row,column,event) => handleRowClick(row,column,event,'onclumn')"
highlight-current-row
>
// <script> Add row-click method, trigger when clicking the list rowhandleRowClick(row,column,event, onclumn){
if(onclumn === 'onclumn') {
= true;
}
= !;
this.$(row, );
if() {
(row);
} else {
(row);
}
}After adding the above code, click on the line, and the check box in front of the corresponding line will be selected or canceled.
2. When clicking the check box, triggers the change of the corresponding row (the key to the question is how to get the rows selected by the check box)
When clicking on a list row, the row-click event is triggered first, and then the selection-change event is triggered. When clicking the check box, only the selection-change event is triggered. If you want to determine which row is triggered when clicking the check box, you need to compare the last selected list item and the selected list item this time.
// template part is the same as above// <script>
handleSelectionChange(val, checkFlag) {
let that = this;
if(checkFlag === 'ischeckboxTick') {
= true
}
// Get the currently increased or decreased data let n = {};
let currentVal = [];
(item => {
(item);
})
if( > ) {
// A value that is different when increasing is different than before n = ((item => !(item)))[0];
} else {
// The value different from the previous one when decreasing let oldSelect = [];
(item => {
(item)
})
if( === 0) {
n = [0];
} else {
((item, index) => {
let delIndex = 0;
((item1, index1) => {
if( === && === && === ) {
delIndex = index;
(index1, 1);
(delIndex, 1, '');
}
})
})
(item => {
if(item !== '') {
n = item
}
})
}
}
= val; // All selected items = false;
= false;
},This is the article about the linking of el-table and check boxes with check boxes. For more related el-table and check boxes, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!