elementUI官方文档里的表格数据都是写死的，不是循环来的，现在精简一下。
1.定义tableData
tableData: [ { date: "2010-1-2", name: "嘻嘻", address: "广州天河东圃" }, { date: "2010-1-2", name: "嘻嘻", address: "广州天河东圃" }, { date: "2010-1-2", name: "嘻嘻", address: "广州天河东圃" } ],
2.定义tableCol，里面需要包含prop,label,width. 如果没有width属性，那么会占用剩下的宽度
tableCol: [ { prop: "date", label: "日期", width: 180 }, { prop: "name", label: "姓名", width: 200 }, { prop: "address", label: "地址" } ]
3.控制操作列的显示隐藏。操作列，只能写死在el-column里
showOper:true,
完整例子：
<template> <div> <el-table :data="tableData" style="width: 100%" border> <el-table-column v-for="(item,i) in tableCol" :key="i" :prop="item.prop" :label="item.label" :width="item.width" ></el-table-column> <el-table-column label="操作" v-if="showOper"> <template slot-scope="scope"> <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button> <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button> </template> </el-table-column> </el-table> </div> </template> <script> export default { name: "HelloWorld", data() { return { showOper:true, tableData: [ { date: "2010-1-2", name: "嘻嘻", address: "广州天河东圃" }, { date: "2010-1-2", name: "嘻嘻", address: "广州天河东圃" }, { date: "2010-1-2", name: "嘻嘻", address: "广州天河东圃" } ], tableCol: [ { prop: "date", label: "日期", width: 180 }, { prop: "name", label: "姓名", width: 200 }, { prop: "address", label: "地址" } ] }; }, methods: { handleEdit(index, row) { console.log(index, row); }, handleDelete(index, row) { console.log(index, row); } }, }; </script> <style lang="css" scoped> </style>
原文：https://www.cnblogs.com/luguankun/p/11723764.html