基于vue + element-ui + vuex的记忆多选表格弹框

一、应用场景

一般后台管理的xx编辑页面都需要点击弹框选择列表数据，自然而然选择element-ui的多选表格，但是 el-table 的多选是切换页码或者说数据刷新之后选择的数据就没了，所以element官方考虑到了这个问题之后，官方文档就加了这个属性 reserve-selection ，这个属性必须配合表格的 row-key 一起使用，这样就可以实现表格跨页选择数据。好嗨哟 ==> 选择数据之后点击弹框的保存按钮，将数据回填到编辑页的数组字段显示。点击保存按钮将表单数据保存。但是 问题来了 ？？？我重新打开编辑页，发现数据都没勾上。卧槽！！！。后面我使用vuex存入已选择的数据，打开弹框的时候，判断数据 id 在vuex 里 就勾上。代码如下：

axios.post(this.url, val, {
    headers: {
		token: this.token
	}
}).then((res) => {
	const data = res.data
	if (data.code === 0) {
	    this.tableData = data.page.list
	    this.pager.total = data.page.total
	    this.tableData.forEach(item => {
			let obj = this.rows.find(ele => {
				return ele.id === item.id
			})
			if (obj) {
				this.$refs.multipleTable.toggleRowSelection(item, true)
			}
		})
	} else {
		const message = data.message || data.msg
		this.$message.error(message)
	}
}).catch((err) => {
	const msg = err.message || err.msg
	this.$message.error(msg)
})

代码感觉没毛病，但是就是不勾上。后来使用 vue 的 $nextTick 方法 ，用于第二次渲染再处理逻辑。

this.$nextTick(() => {
	this.setChecked()
})

// 存在勾上
setChecked () {