el-table自定义<无数据><表头>解决方案

el-table暂无数据样式

使用 <template slot="empty">来插入要替换显示的没有数据时候的样式，在template插入要替换的dom

 <el-table
    :data="inputNumberList"
    stripe
    border
>
    <template slot="empty">
        <div
            class="
                flex-column
                table-nodata
            "
        >
            <img
                class="data-pic"
                :src="
                    require('@/assets/nodata-' +
                        $store.getters
                            .theme +
                        '.png')
                "
                alt=""
            />
            <span>暂无数据</span>
        </div>
    </template>

el-table自定义表头解决方案

使用:render-header来替换对应列的表头的内容

<el-table-column
    label="Column Qualifier"
    :render-header="
        (h, datas) =>
            renderHeader(
                h,
                datas.column,
                '对应物理表的字段名称'
            )
    "
    show-overflow-tooltip
    max-width="400"
>

自定义表头样式通过render函数来进行返回，在这里是返回一个div，包裹着i标签和span标签

renderHeader(h, column, describe) {
    return h("div", { class: "display: flex" }, [
        h("i", {
            class: "required p_r5",
        }),
        h("span", column.label),
        h(
            "el-tooltip",
            {
                props: {
                    content: describe,
                    placement: "right",
                },
            },
            [
                h("i", {
                    class: "icon-tip nav-icon m_l10",
                }),
            ]
      ),
    ]);
},