封装Element-ui Table组件 带有按钮

首先是父组件

<template>
    <div>
        <my-table :columns="columns" :tableData="data"></my-table>
    </div>
</template>  
  
<script>
import MyTable from '../components/SonView.vue'   //引入的子组件

export default {
    components: {
        MyTable,
    },
    data() {
        return {
            //这个是表头数据
            columns: [
                { prop: 'name', label: '姓名' },
                { prop: 'age', label: '年龄' },
                { prop: 'gender', label: '性别' },
                { prop: 'date', label: '生日' },
                { prop: 'fulbut', label: '修改' },
            ],
            //这个是行内数据
            data: [
                { name: '张三', age: 20, gender: '男', date: 2020, },
                { name: '李四', age: 25, gender: '女', date: 2020, },
                { name: '王五', age: 30, gender: '男', date: 2020, },
                { name: '王老五', age: 30, gender: '男', date: 2020, },
                { name: '王杀杀杀', age: 30, gender: '男', date: 2020, },
            ],
        }
    },
}  
</script>

父组件没什么好说的接下来是子组件

封装子组件

<template>
    <el-table :data="tableData" style="width: 100%">
        <el-table-column v-for="(column, index) in columns" :key="index" :prop="column.prop" :label="column.label">

            <template slot-scope="scope">
                <!-- 这里是进行数据判断   判断传递的数据是否存在而进行渲染 -->
                <span v-show="column.prop === 'name'">{{ scope.row.name }}</span>
                <span v-show="column.prop === 'age'">{{ scope.row.age }}</span>
                <span v-show="column.prop === 'gender'">{{ scope.row.gender }}</span>
                <span v-show="column.prop === 'date'">{{ scope.row.date }}</span>
                <el-button v-show="column.prop === 'fulbut'" size="mini"
                    @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                <el-button v-show="column.prop === 'fulbut'" size="mini" type="danger"
                    @click="handleDelete(scope.$index, scope.row)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>
</template>  
  
<script>
export default {
    //这里是用来接受父组件传递过来的的数据
    props: {
        columns: {
            type: Array,
            required: true,
        },
        //这个名字是行内数据    名字要与父组件传递过来的数据名相同
        tableData: {
            type: Array,
            required: true,
        },
    },
    methods: {

    },
    mounted() {
        console.log(this.tableData, this.columns);
    }
}  
</script>

这是一个简单的Table表格封装数据比较简陋但是简单易懂

使用的时候  需要注意的就是传递的  数据字段名字  是否正确基本不会有太多的问题。