The article documents the general business resolution process
- Multi-select of el-Table can only select the current page, but cannot record the selected status
- Service requirements Click Select All to record the selection status of all pages and the current selection
- 1. Modify the el-table type=” Selection “function
- Advantage: the use of el – table multiselect function to realize this. $refs. MultipleTable. ToggleAllSelection ()
- Disadvantages: The implementation overrides the multiple-choice feature of El-Table, leading to repeated dependencies
template:
<el-table ref="multipleTable" :data="tableData"
@selection-change="changeFun"
@select="selectMemoryFn"
@select-all="selectAll">
<el-table-column
width="55"
label="213"
type="selection"
class-name='selection-self'// To manipulate dom > </el-table-column> </el-table> js:data () {
return {
tableData: [],
indeterminate: false, multipleSelection: [], // Select ids: [], // Select id array selectAllChk:false}} changeFun (val) {// Save the selected data id to array for later operation (not related to paging memory) this.$nextTick(() = > {let ids = []
this.multipleSelection.forEach(L => L.forEach(M => ids.push(M.projectBaseId)))
this.ids = ids
console.log(this.ids.length, 'inder')
if(this.allTableData.length ! == this.ids.length && this.ids.length) { this.indeterminate =true
} else {
this.indeterminate = false} / / selectionif (this.ids.length === this.allTableData.length) {
this.selectAllChk = true} this.getchkclassname ()})}, selectAll (selection) {// selectAll method // change the el-tablelet page
if (this.allTableData) {
page = this.allTableData.length / this.dataForBE.pageSize
}
console.log(this.ids.length, 'all')
if(! This. Ids. Length | | (enclosing indeterminate && enclosing ids. Length)) {/ / selectionfor(let i = 0; i < page; i++){
this.multipleSelection[i] = this.allTableData.slice((i)*10 ,(i + 1)*10)
}
console.log(selection.length, 'leng') // Condition: there is a selected lengthif(this.indeterminate && this.ids.length && ! selection.length) { this.setCurrent() } this.getChkClassName() this.selectAllChk =true
this.indeterminate = false
} else{// Select nonefor(let i = 0; i < page; i++){
this.multipleSelection[i] = []
}
this.selectAllChk = false
this.indeterminate = false
}
console.log(this.multipleSelection, 'this.multipleSelection'}, selectMemoryFn (val, row) {// Set paged memoryfn (val, row);letCurrentArr = this.multipleselection [this.currentpage-1] // array corresponding to the currentPageif(! CurrentArr) {this.multiplesElection [this.currentPage-1] = valelse{/ /if(val. Includes (row)) {this.multiplesElection [this.currentPage-1] = val}else{// Cancel currentarr. forEach(item => {if (item.projectBaseId === row.projectBaseId) {
delete currentArr[currentArr.indexOf(item)]
}
})
}
}
},
selectMemoriedDataFn() {// Paging memory autoselect methodif(this.selectAllChk && ! this.multipleSelection[this.currentPage - 1]) { this.$refs.multipleTable.toggleAllSelection()
}
if(this.allTableData.length ! == this.ids.length && this.ids.length) { this.indeterminate =true} this.setCurrent() // Select box style this.getchkclassName ()},setCurrent () {
letCurrentArr = this.multipleselection [this.currentpage-1] // the currentPage corresponds to the selected dataif(currentarr&& currentarr.length) {// If currentarr&& currentarr.length exists, the currentarr.length is executedletTempRowsIDs = this.tabledata.map (L => l.projectBaseId) // Currentarr.foreach ((item, Index) => {// Iterate over the current page selected dataif(temprowsids.includes (item.projectBaseID)) {// if the id matches, select this.$refs.multipleTable.toggleRowSelection(this.tableData[tempRowsIDs.indexOf(item.projectBaseId)])
}
})
}
},
Copy the code
- The code may not be perfect
- 2. Add an el-checkbox to each row and use renderHeader
- Advantages: Do not mix the multi-select functions in the EL-table, implemented separately
- Disadvantages: This is the use of el-table but separate implementation
template
el-table-column :render-header="renderHeader" width="55"> <! --type="selection" -->
<template slot-scope="scope"> <! --> < el-checkbox@change ="selectChange(scope.row, scope.$index)" v-model="scope.row.checked" :disabled="scope.row.status === '1'"></el-checkbox> </template> </el-table-column> // click as many as the tableenoughLen () {
let sumNum = 0
// let num = Math.ceil(this.totalCount/this.dataForJava.pageSize)
// console.log(this.selectionPage, 'this.selectionPageq')
this.selectionPage.forEach((itemSelect, selectIndex) => {
if (itemSelect.status === '0') {
sumNum += itemSelect.length
this.allFlagAfter = false
this.indeterminate = true}})if (sumNum === this.totalCount) {
this.selectAllFlag = true
this.allFlagAfter = true
this.indeterminate = false
} else if(sumNum === 0) {// No this.selectAllFlag =false
this.allFlagAfter = true
this.indeterminate = false}}, // select each box selectChange (selection, This. FliterData (Selection); // Record selected and unselected this.selectionPage[this.dataForjava.page - 1] = this.currentSelection this.selectionPage[this.dataForJava.page - 1][0] && (this.selectionPage[this.dataForJava.page - 1][0].check =false) // Select this. Indeterminate = this. Indeterminate =false
if (this.selectAllFlag) {
this.allFlagAfter = true
this.enoughLen()
} else {
let num = Math.ceil(this.totalCount / this.dataForJava.pageSize)
if (this.selectionPage.length === num) {
this.enoughLen()
}
}
this.$set(this.tableData, selectionIndex, selection)}, // Select fliterData (selection) {let flag = false
console.log(this.currentSelection, 'this.currentSelection')
this.currentSelection.filter((item, itemIndex) => {
if (item.id === selection.id) {
this.currentSelection.splice(itemIndex, 1)
selection.checked = false
flag = true}})if(! flag) { selection.checked =true
this.currentSelection.push(selection)
}
returnSelection}, // automatically select all -- current pageautoAll () {
// this.tableData.forEach((item, index) => {
// this.$refs.tableDataRef.toggleRowSelection(this.tableData[index], true) //}) this.tableData.foreach ((item, index) =>if (item.status === '0') {
item.checked = true
}
this.currentSelection[index] = item
this.$set(this.tableData, index, item)})}, // Render the page selectivelyhandSelected () {
if(this.selectionPage[this.dataForJava.page - 1] && this.selectionPage[this.dataForJava.page - 1].length) {// Integrate list based on existing data this.selectionPage[this.dataForJava.page - 1].forEach((itemPage, itemIndex) => { this.tableData.forEach((itemTableData, indexTable) => {if (itemPage.id === itemTableData.id) {
itemPage.checked = true
this.currentSelection[indexTable] = itemTableData
this.$set(this.tableData, indexTable, itemPage)}})})})}}, // Render multiple checkboxes according to different situationsresSelected () {
if(this.selectAllFlag) {// Only for the current pageif(this.selectionPage[this.dataForJava.page - 1] && this.selectionPage[this.dataForJava.page - 1][0] && ! this.selectionPage[this.dataForJava.page - 1][0].check) { this.handSelected() }else {
this.autoAll()
}
} else {
this.handSelected()
}
},
getTable(){this.resselected ()}, // renderHeader (h, {column, index}) {return h(
'el-checkbox', {
'class': {
'checkedAll': true
},
'props': {
indeterminate: this.indeterminate,
value: this.selectAllFlag
},
on: {
change: this.selectAllClick
}
}, [' '}, // select allselectAllClick () {
this.indeterminate = false// Clean click allif(! this.selectAllFlag && this.allFlagAfter) { this.selectAllFlag =true// All custom total data is marked to indicate that it is now all selectedlet num = Math.ceil(this.totalCount / this.dataForJava.pageSize)
for (let index = 0; index < num; index++) {
if (this.selectionPage[index]) {
this.selectionPage[index][0] && (this.selectionPage[index][0].check = true)}}}else{// Click all first and then click separatelyif(! this.allFlagAfter) { this.selectAllFlag =true
this.allFlagAfter = true/ / and then click the selection to the current state to empty this. SelectionPage. ForEach ((itemFirst firstIndex) = > {if (itemFirst) {
itemFirst[0] && (itemFirst[0].check = true)
}
this.selectionPage = []
})
} else{// Click to cancel this.selectAllFlag =falseThis.selectionpage = [] this.currentSelection = []}} this.tableData.foreach ((item, index) => {this.selectionPage = [] this.currentSelection = []}}if (this.selectAllFlag) {
if (item.status === '0') {
item.checked = true
}
this.currentSelection[index] = item
} else {
item.checked = false
}
this.$set(this.tableData, index, item)
})
},
Copy the code