1.组件代码

<template><el-table :cell-style=\"{\'text-align\':\'center\'}\" :data=\"tableData\" border:header-cell-style=\"{background:\'#F5F7FA\',\'text-align\':\'center\',\'font-size\':\'12px\'}\" style=\"width: 100%\"><el-table-column v-for=\"(item,index) of column\" :key=\"index\" :prop=\"item.value\" :label=\"item.title\":width=\"item.width||\'\'\"><template slot-scope=\"scope\"><div v-if=\"item.title===\'操作\'\"><el-button @click=\"button.fun(scope.$index,scope.row)\" type=\"text\" size=\"small\"v-for=\'(button,index) in operation\' :key=\'index\'>{{button.name}}</el-button></div><div class=\'cell\' v-else>{{scope.row[item.value]}}</div></template></el-table-column></el-table></template><script>export default {name: \'Table\',props: {//表格数据tableData: {type: Array,required: true},//列 标题 和 参数名column: {type: Array,required: true},// 操作列按钮配置operation: Array,},}</script>

2.父组件里使用（这里我是全局组件 我就没写引用了）

<template><div class=\"dashboard-container\"><div class=\"dashboard-text\">用户姓名: {{ name }}</div><div class=\"dashboard-text\" v-for=\"item in dept \" :key=\"item.index\">所属部门: {{ item }}</div><Table :tableData=\'tableData\' :column=\'column\' :handleEidt=\"handleEidt\" :operation=\'operation\' /></div></template><script>import {mapGetters} from \'vuex\'export default {name: \'Dashboard\',computed: {...mapGetters([\'name\',\'dept\'])},data() {return {operation: [{name: \'修改\',fun: this.onClick}, {name: \'删除\',fun: this.onDelete}],tableData: [{date: \'2016-05-02\',name: \'王小虎\',address: \'上海市普陀区金沙江路 1518 弄\',phone: 1235612},{date: \'2016-05-02\',name: \'王小虎\',address: \'上海市普陀区金沙江路 1518 弄\',phone: 58456654},],column: [{value: \'operation\',title: \'操作\',width: \'60\'}, {value: \'name\',title: \'名称\',width: \'150\'}, {value: \'address\',title: \'地址\',// width: \'200\'}, {value: \'phone\',title: \'电话\',width: \'120\'}]}},methods: {handleEidt(index, row) {console.log(\'index, row\')},onClick(index, row) {console.log(index, row)},onDelete(index, row) {console.log(index, row)}}}

3.实现效果