vue动态列(表头)

最近要做一个需求是要写好多好多个相同逻辑但字段不同的报表,以下是代码

html 复制代码
<el-table :data="ListAll">
	<el-table-column v-for="(column,index) in tableColumns" :key="index" :prop="column.prop" :label="column.label" header-align="center" align="center">
	
	</el-table-column>
</el-table>
javascript 复制代码
<script>
export default{
	data(){
		//字段定义
		tableColumns:[],
		ListAll:[],
		title:[]
		},
		methods:{
		getData(){
			const columnHeader = {}
			//如果有固定字段可以在这里先赋值
			columnHeader['字段名'] = {prop:`字段名`,label:`字段描述`}
			this.$api.queryList(this.params).then((res)=>{
				//这里的取值根据自己的返回结果来
				this.ListAll = res.data.list //数据
				//这里是把字段名,单独拆开了,title只传的列名,
				//后端数据格式为HashMap,例{key:value,字段1:描述1,字段2:描述2,字段3:描述3....}
				this.title=res.title 
				for(let key in this.title){
					let value=this.title[key]
					columnHeader[key]={prop:`${key}`,label:`${value}`}
				}
				this.tableColumns = columnHeader
				//完成,list不用做处理了,在el-table赋值就可以了
			})
		}
		}
}

</script>

完成啦!!!这样相同的逻辑就不用写多张表

另外后端处理方式各不相同,这里不好放代码,有需要私下也欢迎交流

我这里后端字段和描述的处理是存在一张对应表中,抽取到缓存中使用

相关推荐
翻滚吧键盘26 分钟前
js代码09
开发语言·javascript·ecmascript
万少1 小时前
第五款 HarmonyOS 上架作品 奇趣故事匣 来了
前端·harmonyos·客户端
OpenGL1 小时前
Android targetSdkVersion升级至35(Android15)相关问题
前端
rzl021 小时前
java web5(黑马)
java·开发语言·前端
Amy.Wang1 小时前
前端如何实现电子签名
前端·javascript·html5
海天胜景1 小时前
vue3 el-table 行筛选 设置为单选
javascript·vue.js·elementui
今天又在摸鱼1 小时前
Vue3-组件化-Vue核心思想之一
前端·javascript·vue.js
蓝婷儿1 小时前
每天一个前端小知识 Day 21 - 浏览器兼容性与 Polyfill 策略
前端
百锦再1 小时前
Vue中对象赋值问题:对象引用被保留,仅部分属性被覆盖
前端·javascript·vue.js·vue·web·reactive·ref
jingling5551 小时前
面试版-前端开发核心知识
开发语言·前端·javascript·vue.js·面试·前端框架