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' }
      },
}

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

上一篇:阿里老大哥终于舍得浅谈一下UI自动化测试


下一篇:开发十余年Android架构师教你如何突破瓶颈,达到年薪50W