vue,使用el-table循环生成表格的过程

使用el-table循环生成表格

el-table

vue项目中使用element框架，提供的table组件使用起来过于繁杂，改成配置模式，循环生成表格！

配置前：

配置后：

动态循环el-table的列

<template>
 <div class="hello">
  <EncapTable ref="items" :Data="Data"></EncapTable>
 </div>
</template>

<script>
import EncapTable from "./EncapTable";
export default {
 name: "HelloWorld",
 components: {
  // 注册组件
  EncapTable
 },
 data() {
  return {
   Data: {
    tableData: [
     // 表单数据
     {
      date: "2016-05-02",
      name: "王小虎",
      address: "上海市普陀区金沙江路 1518 弄"
     },
     {
      date: "2016-05-04",
      name: "王小虎",
      address: "上海市普陀区金沙江路 1517 弄"
     },
     {
      date: "2016-05-01",
      name: "王小虎",
      address: "上海市普陀区金沙江路 1519 弄"
     },
     {
      date: "2016-05-03",
      name: "王小虎",
      address: "上海市普陀区金沙江路 1516 弄"
     }
    ],
    tableTitle: [
     // 用于动态循环表头
     {
      prop: "date",
      label: "日期"
     },
     {
      prop: "name",
      label: "姓名"
     },
     {
      prop: "address",
      label: "地址"
     }
    ],
    // 一页显示多少条
    pageSize: 10,
    // 是否显示编辑和删除
    showEditAndDelete: true
   }
  };
 },
 mounted() {}
};
</script>
<style scoped></style>

以上为个人经验，希望能给大家一个参考，也希望大家多多支持源码搜藏网。