el-table 获取当前table表头集合

原创已于 2023-10-30 17:15:45 修改 · 1.3k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #elementui #前端

于 2023-10-30 14:40:57 首次发布

文章讲述了如何使用SortableJS在前端开发中实现动态表头拖拽功能，通过递归获取el-table-column并根据需求筛选和存储表头信息，以便动态渲染和处理多级表头。

前言：
要做表头拖拽功能，用的sortablejs，之前是一个一个的el-table-column页面元素，我们要获取到所有要拖拽的表头放到数组内动态渲染：

//获取表头方法
loadCustom() {
	let tableHeader = []
	let tableHeaders = []
	//所有表格数据  $refs对应的表头
	tableHeader = this.$refs['multipleTable'].store.states._columns
	if (tableHeader && tableHeader.length > 0) {
		//递归出需要的表头数据 放进数组里
		tableHeader.forEach((column, _index) =>{
			//这里根据需求有条件去取舍 如果是多级表头的是 判断是否有子表头：column.children.length >0 有的话再往里放
			if(column.property){
			    //这里根据需要放入需要的相关 参数
				tableHeaders.push({
					id:_index,
					show: true,
					prop: column.property,
					label: column.label,
					sortable: column.sortable,
					align: column.align,
					width: column.width,
					template: true
				})
			}
			
		})
	}
	console.log('处理后想要的表头集合tableHeaders===' + JSON.stringify(tableHeaders))
},