element表格数据渲染column

element中的表格字段渲染

父组件中

column: [
    {id: -1, type: 'selection', align: "right", width: 60},
    {id: 0, label: '序号', align: "center", render: (h, record)=>{
        return h("span", record.index+1)
    }},
    {id: 1, prop: 'user', label: '用户名', align: 'center'},
    {id: 2, prop: 'nick', label: '昵称', align: 'center', render: (h, record)=>{
            return h("span", "你猜");
        }},
    {id: 3, label: '操作', align: "center", render:(h,params)=>{
            let arr = []
            arr.push(h("el-button",{
               // props里面修改的是element中的标签的属性
                props: {
                    type:"primary",
                    icon:"el-icon-edit",
                    size: 'mini'
                },
                on:{
                    click:()=>{
                        const index = this.tableData.findIndex(item=>item.id == params.row.id);
                        this.tableData.splice(index, 1);
                    }
                }
            }, "新增"))
            arr.push(h("div",{
                on:{
                    click:()=>{
                        console.log(params)
                    }
                },

                // style 是标签的样式
                style: {
                    color: "red",
                    cursor: "pointer",
                    marginLeft: "20px"
                },
                // attrs 是普通标签的属性
                attrs:{
                    title: "测试",
                    class: "el-icon-edit"
                }
            }))
            return h('div',arr)
        }
    }
]

子组件在渲染的时候
template模板部分

<template>
    <div class="place-table">
        <el-table
            :data="tableData"
            style="width: 100%"
            row-key="id"
            @selection-change="handleSelectionChange"
            ref="comTable"
            :header-cell-style="{background: '#EFF7F8', color: '#606266', padding: '12px 0'}"
            :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
            :lazy="lazy"
            :load="load"
            :highlight-current-row="highLight"
            :expand-row-keys="expandRowKeys"
            border
            :key="Math.random()"
        >
            <!--复选框-->
            <template v-for="item in column">
                <el-table-column v-if="item.type" type="selection" :reserve-selection="true" width="55" :key="Math.random()" fixed="left"></el-table-column>
                <!--父组件传过来的字段-->
                <el-table-column v-else :key="item.id" :prop="item.prop" :label="item.label" :width="item.width" :align="item.align" :fixed="item.fixed" :show-overflow-tooltip="true">
                    <template slot="header" slot-scope="scope">
                        <span style="white-space: nowrap;" :title="scope.column.label">{{scope.column.label}}</span>
                    </template>
                    <template slot-scope="scope">
                        <div  class="cell-tip">
                            <ex-slot v-if="item.render" :render="item.render" :row="scope.row" :index="scope.$index" :column="item" />
                            <!-- column  render函数显示区 -->
                            <span v-else>{{ scope.row[item.prop] || "-" }}</span>
                            <!-- column  直接绑定的字段显示区 -->
                        </div>
                    </template>
                </el-table-column>
            </template>
            <slot :tableData="tableData" name="handleSlot"></slot>
        </el-table>

        <div class="place-pagination" v-if="isPagination">
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[10, 20, 50]"
                :page-size="pageSize"
                layout="total, prev, pager, next, sizes, jumper"
                :total="pageTotal"
            >
            </el-pagination>
        </div>
    </div>
</template>

js部分

<script>
    let exSlot = {
        functional: true,
        props: {
            row: Object,
            render: Function,
            index: Number,
            column: {
                type: Object,
                default: null
            }
        },
        render: (h, data) => {
            const params = {
                row: data.props.row,
                index: data.props.index
            };
            if (data.props.column) params.column = data.props.column;
            return data.props.render(h, params);
        }
    };
    export default {
        name: "TableComponent",
        data() {
            return {};
        },
        props: {
            lazy: Boolean,
            tableData: Array, // 表格数据
            column: Array, // 表格显示字段
            currentPage: Number, // 当前页
            pageSize: Number, // 每页多少条
            pageTotal: Number, // 多少页
            operation: Boolean, // 是否显示操作字段
            number: Boolean, // 是否显示序号
            isEdit: Boolean, // 是否显示编辑按钮
            isDetail: Boolean, // 是否显示查看按钮
            isDelete: Boolean, // 是否显示删除按钮
            isPagination: Boolean, //是否显示分页
            isMultipleChoice: Boolean, // 是否显示复选框
            operationList: Array,
            isLazy: {
                type: Boolean,
                default: false
            },
            highLight: {
                type: Boolean,
                default: false
            },

            expandRowKeys: Array,
            uncheck: Boolean ,   // 触发表格清空复选内容
        },

        methods: {
            // 每页多少条
            handleSizeChange(pageSize) {
                this.$emit("handleSizeChange", pageSize);
            },

            // 当前页
            handleCurrentChange(currentPage) {
                this.$emit("handleCurrentChange", currentPage);
            },

            // 复选框的内容
            handleSelectionChange(val) {
                this.$emit("handleSelectionChange", val);
            },

            // table表格懒加载
            load(tree, treeNode, resolve) {
                this.$emit("treeLoad", { tree, treeNode, resolve });
            },
        },
        watch: {
            tableData: {
                handler() {
                    if (this.highLight) {
                        this.$nextTick(function () {
                            this.$refs.comTable.setCurrentRow(this.tableData[0]);
                        });
                    }
                },
                deep: true,
                immediate: true
            },
            uncheck() {
                this.$refs.comTable && this.$refs.comTable.clearSelection()
            }
        },
        components: {
            exSlot
        }
    };
</script>