配置项的形式二次封装饿了么table组件 vue

实现效果：

 

每列的数据和表头都可以通过配置对象传入组件中，然后进行渲染。这里的表格是通过render函数来渲染需要自定义的内容。

代码如下，首先是调用组件页面：

<template>
    <div>
        <ele-table :data="dataList" :columns="columnsList" ">
        </ele-table>
    </div>
</template>

<script>
import eleTable from "./eleTable";

export default {
    components: {
        eleTable,
    },

    data() {
        return {

//表内容数据
  dataList: [
                {
                    date: "2016-06-02",
                    name: "1",
                    address: "上海市普陀区金沙江路 1518 弄",
                },
                {
                    date: "2016-05-04",
                    name: "3",
                    address: "上海市普陀区金沙江路 1517 弄",
                },
                {
                    date: "2016-05-01",
                    name: "0",
                    address: "上海市普陀区金沙江路 1519 弄",
                },
                {
                    date: "2016-05-03",
                    name: "4",
                    address: "上海市普陀区金沙江路 1516 弄",
                },
            ],

            // 表格列数据 表头配置项目 和 表格内容自定义显示
            columnsList: [
                {
                    prop: "date", // 属性
                    label: "日期",//表头显示的值
                    width: "120",//宽度
                    sortable: true,//开启排序
                    renderA: (m) => {  //自定义函数，返回一个能够被render渲染的jsx
                        return (
                            <span>
                                <span style="border-bottom:1px solid #ccc;cursor:pointer">
                                    {m.date}
                                </span>
                            </span>
                        );
                    },
                },
                {
                    prop: "name",
                    label: "姓名",
                    width: "180",
                    sortable: true,
                    render: (m) => {
                        return (
                            <span>
                                <span style="color: red;">{m.name}</span>
                                <span style="color: blue; margin-left: 10px;">
                                    {m.name}
                                </span>
                            </span>
                        );
                    },
                },
                {
                    prop: "address",
                    label: "地址",
                    width: "220",
                },
                {
                    prop: "handle",
                    label: "操作",
                    renderA: () => {
                        return (
                            <div>
                                <span
                                    onClick={this.handleDeatils}
                                    style="color:blue;"
                                >
                                    详情
                                </span>
                                <span
                                    onClick={this.handleDelete}
                                    style="color:red;margin-left: 10px;"
                                >
                                    删除
                                </span>
                            </div>
                        );
                    },
                },
            ],
        };
    },
    mounted() {},
    methods: {
        handleDeatils() {
            console.log("详情");
        },
        handleDelete() {
            console.log("删除");
        },
    },
};
</script>

 组件内部的封装：

<template>
    <div>
        <el-table :data="dataList">

            <el-table-column v-for="(item, index) in columns" :key="index" v-bind="item" :sortable="item.sortable">

                <!-- 判断是否需要进行自定义渲染 -->
                <template v-if="item.renderA" v-slot="scope">
                    <render-dom :render="() => item.renderA(scope.row)"></render-dom>
                </template>
                <!-- 此处除了进行render渲染，还可以使用作用与插槽，通过在调用页面配置当前需要渲染的数据是否是插槽来进行自定义数据的渲染 -->
            

            </el-table-column>

        </el-table>

    </div>
</template>

<script>
export default {
    name: "table",
    components: {
        // 函数式组件注册 进行组件容器注册
        renderDom: {
            functional: true,
            props: {
                render: Function,//设置组件props
            },
            render(createElement, renDom) { //render函数渲染
                return renDom.props.render();  //获取配置项配置的自定义显示数据格式，render函数进行渲染
            },
        },
    },

    props: {
        columns: {
            type: Array,
            default: () => [],
        },
        dataList:{
            type:Array,
            default:[]
        }
    },
    data() {
        return {};
    },
    methods: {
    },
};
</script>