The form of the configuration item is secondary encapsulation Ele.me table component vue

Realize the effect:

 

The data and table header of each column can be passed to the component through the configuration object, and then rendered. The table here is to render the content that needs to be customized through the render function.

The code is as follows, the first is to call the component page:

<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>

 Encapsulation inside the component:

<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>