el-table多选框数据回显

必要属性:1.row-key; 2. reserve-selection ;  3.表格设置ref属性
 

row-key的官网解释:

el-table多选框数据回显_第1张图片

三个必要属性的使用:

el-table多选框数据回显_第2张图片

上代码:

getRecruitmentPostList (value) { // 这个value是我在某次调用时传来的参,主要是为了判断调用接口时是否回显多选框
			this.recruitmentPostLoading = true;
			API.getJobList(this.recruitmentPostQueryParams).then(res => {
				if (res.code == '200') {
					this.recruitmentPostTableList = res.rows;
					this.recruitmentPostTotal = res.total;
					this.recruitmentPostLoading = false;
				} else {
					this.recruitmentPostTableList = [];
					this.recruitmentPostTotal = 0;
					this.recruitmentPostLoading = false;
				}
				if (value) {
					this.$refs.recruitmentPostTable.clearSelection() // 我如果没加这一句,会回显失败
					this.jobTableList.forEach(key1 => { // 根据这个数组决定要回显的多选框
						this.$nextTick(() => {
							this.recruitmentPostTableList.forEach(key2 => { // 这个数组是要回显多选框的那个表格数据
								console.log(key1.id == key2.id)
								if (key1.id == key2.id) {
									this.$refs.recruitmentPostTable.toggleRowSelection(key2, true); //这里选择的key2值才有效,如果要是无效可以选择key1值
								}
							})
						})
					})
				}

			});
		},

结束啦 

你可能感兴趣的:(elementui,前端,javascript,vue.js)