【Element-UI-el-table-多选框回显】

最新推荐文章于 2024-07-08 12:14:04 发布

聚宝盆_

最新推荐文章于 2024-07-08 12:14:04 发布

阅读量574

点赞数 1

分类专栏：记录项目中遇到的问题文章标签： elementui vue.js

本文链接：https://blog.csdn.net/weixin_47416539/article/details/125083877

版权

记录项目中遇到的问题专栏收录该内容

48 篇文章 0 订阅

订阅专栏

本文介绍了如何在使用Element-UI的el-table组件时，实现多选框选择状态的回显。通过监听`selection-change`和`select`事件，以及使用`toggleRowSelection`方法，可以在数据加载后根据预设的选中项回显选中状态。

摘要由CSDN通过智能技术生成

Element-UI-el-table-多选框回显

<el-table
	ref="multipTable"
	:data="tableDataB"
	@selection-change="handleSelectionChange"
	
	 @select="selectionRow"
>
	<el-table-colum
		type="selection"
	>
	</el-table-colum>		
</el-table>

handleSelectionChange(val){
	this.multipleSelection = val
},
selectionRow(selection, row){//获取选中的select
    let selected = selection.length && selection.indexOf(row) !== -1; //为true时选中，为 0 时（false）未选中
    if(selected){
        this.deleteRowIdArray.push(row);
    }
},
需要回显时的函数（）{
	this.deleteRowIdArray.forEach((item)=>{
		this.tableDataB.forEach((item1)=>{
			if(item1.id==item.id){
	 			this.$nextTick(()=>{
	 				this.$refs.multipTable.toggleRowSelection(item1,true);
	 			})
			}
		})
	})
}