table-nowrap/index.js

解决element UI table折行问题

const calcWidthColumns = (columns, data, style) => {
    const handleStrLen = (value, key) => value[key] ? value[key].toString().length : 0;
    const div = document.createElement('div');
    div.style = `${style}position: absolute;left: -999px;`;
    document.body.appendChild(div);
    const newColumns = columns.map(((t, i) => {
        if (t.width || t.minWidth) return t;
        let text = '';
        if (data.length) {
            const T = data.reduce((cur, pre) => {
                const cLen = handleStrLen(cur, t.prop);
                const pLen = handleStrLen(pre, t.prop);
                return pLen >= cLen ? pre : cur
            });
            text = T[t.prop];
        }
        const label = document.createElement('span');
        const span = document.createElement('span');
        label.innerHTML = t.label;
        span.innerHTML = text;
        div.appendChild(label);
        div.appendChild(span);
        let minWidth = span.offsetWidth > label.offsetWidth ? span.offsetWidth : label.offsetWidth;
        if (!0) {
            minWidth = minWidth + 48;
        } else {
            minWidth = minWidth + 12;
        }
        return {
            ...t,
            minWidth
        };
    }));
    document.body.removeChild(div);
    return newColumns
};

export default calcWidthColumns