其他分享
首页 > 其他分享> > element中tabel+v-for动态循环多个列

element中tabel+v-for动态循环多个列

作者:互联网

接手之前后端做的vue项目,里面很多tabel页面除了具体的列名其他的逻辑功能,展示都是一样的。所以自己做了优化:根据后端传的数据动态展示不同的列。

<template>
 <div>
	<el-table
	       :data="list"
	        style="width: 100%;">
	        <el-table-column
	          v-for="(item, index) in tableHeader"
	          :key="index"
	          :prop="index"
	          :label="item"
	        ></el-table-column>
	  </el-table>
  </div>
</template>

<script>
export default {
  data () {
    return {
      list: [],
      tableHeader: {},
     }
  },
created () {
    this.list = [{ caseListName: 'zss', caseListType: 'kkk' },
      { caseListName: 'zss', caseListType: 'kkk' },
      { caseListName: 'zss', caseListType: 'kkk' },]
      this.tableHeader = { caseListName: 'caseListName', caseListType: 'caseListType' }
      },
}

在这里插入图片描述

标签:tableHeader,tabel,caseListType,zss,element,kkk,caseListName,动态
来源: https://blog.csdn.net/qq_42483955/article/details/122510865