el-table实现指定列作动态列表渲染

最新推荐文章于 2024-10-16 15:22:52 发布

 The dream is near  

最新推荐文章于 2024-10-16 15:22:52 发布

阅读量760

点赞数

分类专栏： vue elementui 文章标签： javascript vue.js

本文链接：https://blog.youkuaiyun.com/weixin_44988028/article/details/119999003

版权

vue 同时被 2 个专栏收录

16 篇文章

订阅专栏

elementui

11 篇文章

订阅专栏

使用Vue.js的el-table组件实现动态列表渲染，通过myList作为表头名称，readList作为内容遍历，prop设置为readList的value值进行渲染。当后端数据顺序传送时，可直接用readList的name属性渲染表头。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

重要代码:
myList是动态列的表头名称,
readList是需要遍历的动态内容

myList:{
	[name:'动态列1'],
	[name:'动态列2']
}
readList:{
	[name:'动态列1'，value:''],
	[name:'动态列2',value:'']
}

prop值为readList对应的value值

<el-table-column
   v-for="(item, index) in myList"
   :key="index"
   :label="item.name"
   align="center"
   :prop="`readList.${index}.value`"
 >
 </el-table-column>

完整代码：

 <el-table
        :data="exportForm.exportData"
        :key="exportTableKey"
        row-key="index"
        ref="exportTable"
        id="out-table"
 >
 	 <el-table-column prop="fix_first" label="固定列1" align="center">
     </el-table-column>
     <el-table-column prop="fix_second" label="固定列2" align="center">
     </el-table-column>
     //动态列 prop即为每一个item里的readList对应的value值
     <el-table-column
	   v-for="(item, index) in myList"
	   :key="index"
	   :label="item.name"
	   align="center"
	   :prop="`readList.${index}.value`"
	 >
	 </el-table-column>
 </el-table>

js:
如果后端传的动态列是按顺序传送的，也可以直接拿readList里的name来渲染表头

data(){
	exportForm：{
	//后端传的数据
		exportData：{
			[
			//固定列
			fix_first:"",
			fix_second:"",
			//动态列
			readList:{
				[name:'动态列1'，value:''],
				[name:'动态列2',value:'']
			}
			]
		}
	}
	//表头渲染
	myList:{
		[name:'动态列1'],
		[name:'动态列2']
	}
}