Vue（一）：ElementUI表格 - 配置表头动态宽度、配置表头提示功能

来吧，展示

源码

<template>
    <div>
        <el-table :data="tableData" border>
            <template v-for="(item, index) in tableHeader">
                <el-table-column
                    :key="index"
                    :prop="item.prop"
                    :label="item.label"
                    :width="
                        tableSetThWidth(item.label, [
                            { name: '日期', width: 200 },
                            { name: '地址', width: 1200 },
                        ])
                    "
                    :render-header="tipHelp"
                ></el-table-column>
            </template>
        </el-table>
    </div>
</template>

<script>export default {
    name: "Table",
    data() {
        return {
            tableHeader: [
                {
                    label: "日期",
                    prop: "date",
                },
                {
                    label: "姓名",
                    prop: "name",
                },
                {
                    label: "地址",
                    prop: "address",
                },
            ],

            tableData: [
                {
                    date: "2016-05-02",
                    name: "王小虎",
                    address: "上海市普陀区金沙江路 1518 弄",
                },
                {
                    date: "2016-05-04",
                    name: "王小虎",
                    address: "上海市普陀区金沙江路 1517 弄",
                },
                {
                    date: "2016-05-01",
                    name: "王小虎",
                    address: "上海市普陀区金沙江路 1519 弄",
                },
                {
                    date: "2016-05-03",
                    name: "王小虎",
                    address: "上海市普陀区金沙江路 1516 弄",
                },
            ],
        };
    },
    methods: {
        tableSetThWidth(name, options) {
            if (options) {
                let item = options.find((item) => item.name == name);
                if (item) {
                    return item.width;
                } else {
                    return name.length * 25;
                }
            } else {
                return name.length * 25;
            }
        },

        tipHelp(h, { column, $index }) {
            console.log(h, { column, $index });

            return h(
                "el-tooltip",
                {
                    props: {
                        content: `${column.label} Message !`, // 可以写一个立即执行函数进行传参判断操作，返回一个字符串
                        effect: "light",
                    },
                    domProps: {
                        innerHTML: `${column.label}<i class="el-icon-question"></i>`,
                    },
                },
                [h("span")]
            );
        },
    },
};</script>