vue使用el-table实现自定义表头及内容数据

老规矩话不多说,直接上代码

<el-table :data="rightSet" border>
  <el-table-column
  align="center"
  v-for="(item, index) in rightHeader"
  :key="index"
  :prop="item.prop">
     <template slot="header">
        <span>{{ item.name }}</span>
     </template>
  </el-table-column>
</el-table>

数据要求:

rightSet:[
	{
		v1:'index.html',
		v2:'logo.png',
	},
	{
		v1:'index.html',
		v2:'logo.png',
	},
]

rightHeader:[
	{
		name:'文件',
		prop:'v1'
	},
	{
		name:'img',
		prop:'v2'
	}
]

如果帮助到你,请留下一个小心心!

Logo

DAMO开发者矩阵,由阿里巴巴达摩院和中国互联网协会联合发起,致力于探讨最前沿的技术趋势与应用成果,搭建高质量的交流与分享平台,推动技术创新与产业应用链接,围绕“人工智能与新型计算”构建开放共享的开发者生态。

更多推荐