基于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 () {
	this.tableData.forEach(item => {
	    let obj = this.rows.find(ele => {
		    return ele.id === item.id
	    })
	    if (obj) {
		    this.$refs.multipleTable.toggleRowSelection(item, true)
	    }
    })
}

ok 完美

最后觉得这样写还不如自己自定义选择逻辑，不用element-ui的 reserve-selection 。自己动手，丰衣足食。

二、公用组件主要逻辑处理

// el-table 的 select 事件 @select="selectRow" 
selectRow (selection, row) {
	const temp = this.rows.find((item) => {
		return item.id === row.id
	})
	if (temp) {
		// delete
		this.deleteItem({ id: row.id })
	} else {
		// insert
		this.insertItem(row)
	}
},

// el-table 的 select-all 事件 @select-all="selectAllRow"
selectAllRow (selection) {
	if (selection.length === 0) {
		this.deleteAllItem(this.tableData)
	} else {
		this.insertAllItem(this.tableData)
	}
},

// 选择数据存入 vuex 的 rows 中
...mapMutations({
	insertItem: 'content/insertRow',
	deleteItem: 'content/deleteRow',
	insertAllItem: 'content/insertAllRow',
	deleteAllItem: 'content/deleteAllRow'
})

const state = {
  text: '这是Text---state',
	rows: []
}

const getters = {
  getText: state => state.text,
  getRows: state => state.rows
}
const mutations = {
  updateText: (state, text) => {
    state.text = text
  },
  insertRow: (state, row) => {
		const index = state.rows.findIndex(item => {
			return item.id === row.id
		})
		if (index === -1) {
			state.rows.push(row)
		}
	},
	deleteRow: (state, { id }) => {
		const index = state.rows.findIndex(item => {
			return item.id === id
		})
		if (index !== -1) {
			state.rows.splice(index, 1)
		}
	},
	insertAllRow: (state, rows) => {
		rows.forEach(item => {
			let index = state.rows.findIndex(ele => {
				return ele.id === item.id
			})
			if (index === -1) {
				state.rows.push(item)
			}
		})
	},
	deleteAllRow: (state, rows) => {
		rows.forEach(item => {
			let index = state.rows.findIndex(ele => {
				return ele.id === item.id
			})
			if (index !== -1) {
				state.rows.splice(index, 1)
			}
		})
	},
	setRows: (state, list) => {
		// state.rows = list || []
		state.rows = JSON.parse(JSON.stringify(list))
	}
}

perfect 完美

既然是公用组件，必须可自定义化一些东西 。。。

三、组件API

MemoryTable  Attributes

参数	说明	类型	默认值
keys	编辑页面需要保存给后台的数组中对象中的字段属性名	Array	['id']
message	弹框点击保存没有勾选数据的提示信息	String	请勾选数据
top	el-dialog 的 top 属性	String	12vh
height	el-table 的 height 属性	String	400px
border	el-table 的 border 属性	Boolean	false
stripe	el-table 的 stripe 属性	Boolean	false
visible	弹框的显示属性	Boolean	false
width	el-dialog 的 width 属性	String	800px
title	弹框的title	String	添加数据
cols	弹框中表格的列配置数组，参照下表	Array	[]
params	表格数据的搜索表单对象	Object	{}
url	查询表格的接口地址（接口根据自己需求修改组件代码）	String	--

 

 

 

 

 

 

 

 

 

 

 

 

 

 

cols列配置

参数	说明	类型	默认值
label	el-table-column 的 label 属性	String	--
prop	el-table-column 的 prop 属性	String	--
format	表格列的格式化函数	Function(row), row是这一行的数据	--
align	el-table-column 的 align 属性	String	left
cell	是否为 cell 插槽，slot="cell"	Boolean	false

 

 

 

 

 

 

 

MemoryTable  Events

事件名	说明	参数
close	关闭弹框的事件	--
confirm	弹框保存按钮触发的事件	selection

 

 

 

 

MemoryTable  Slot

name	说明
search	插入至表格搜索表单的内容，如果需要对表格的内容进行搜索，可能需要用到这个 slot。
selection	自定义显示插槽，如果需要对勾选的数据自定义显示，可能需要用到这个 slot。slot-scope="{ rows }" 接收参数 rows  为已选择的数据。
cell	特殊单元格插槽，用于表格单元格自定义显示。slot-scope="{ row }" 接收参数 row  为这一行的数据。

 

 

 

 

 

ok 到此为止 用法就结束了 ，然后接下来是你们期待已久的干货啦！！！ demo

四、用法Demo

参考我的资源链接，后续提供 GitHub 地址

 

---

前端小小白，谢谢支持！！！