一、介绍
this.$refs.table.toggleRowSelection(row, selected)
- 该API一般在页面加载完成之后再调用
- 该API会触发表格的
selection-change
事件,注意勾选数据的影响
二、示例
1、使用
<el-table ref="table" :data="tableData" @selection-change="handleSelectionChange">
</el-table>
data(){
return{
tableData: [],
selectionTableData: []
}
},
methods:{
handleSelectionChange(selection){
this.selectionTableData=selection
},
handleUpdate(){
getDetail().then(res=>{
this.tableData=res.data.tableData
this.selectionTableData=res.data.selectionTableData
this.$nextTick(() => {
this.selectionTableData.forEach((item,index,arr)=>{
this.$refs.table.toggleRowSelection(item, true)
})
this.tableData.forEach((dataItem,dataIndex,dataArr)=>{
this.selectionTableData.forEach((item,index,arr)=>{
if(JSON.stringify(dataItem)===JSON.stringify(item)){
this.$refs.table.toggleRowSelection(dataItem, true)
}
})
})
const selectionArr=this.selectionTableData
this.tableData.forEach((dataItem,dataIndex,dataArr)=>{
this.selectionArr.forEach((item,index,arr)=>{
if(JSON.stringify(dataItem)===JSON.stringify(item)){
this.$refs.table.toggleRowSelection(dataItem, true)
}
})
})
})
})
}
}
2、分页切换的勾选消失
- 切换下一页时,页面刷新tableData发生变化,在返回上一页,勾选的数据checkbox的check属性已经被重置为false,所以不会回显之前勾选的行
<el-table ref="table" :data="tableData" @selection-change="handleSelectionChange">
</el-table>
data(){
return{
loading: true,
total: 0,
tableData: [],
currCheckData:[],
totalCheckData:[]
}
},
methods:{
addCurrPageData(){
if(this.currCheckData.length!==0){
this.totalCheckData=this.totalCheckData.concat(this.currCheckData)
this.currCheckData=[]
}
},
getList() {
this.loading=true
this.addCurrPageData()
listQuestion(this.queryParams).then(res=>{
this.tableData=res.rows
this.total=res.total
this.$nextTick(()=>{
this.tableData.forEach((dataItem,dataIndex,dataArr)=>{
this.totalCheckData.forEach((item,index,arr)=>{
if(dataItem.qustId===item.qustId){
this.$refs.table.toggleRowSelection(dataItem,true)
this.totalCheckData.splice(index,1)
}
})
})
})
this.loading=false
})
},
handleSelectionChange(selection){
this.currCheckData=selection
},
checkQust(){
this.addCurrPageData()
}
}