eltable 列头不换行 内容自适应

eltable 列头不换行 内容自适应_第1张图片

 

eltable 列头不换行 内容自适应_第2张图片 

以下是两段关键性代码段:

 

   renderHeader(h, { column, $index }) {
                    // 新建一个 span
                    let span = document.createElement('span');
                    // 设置表头名称
                    span.innerText = column.label;
                    // 临时插入 document
                    document.body.appendChild(span);
                    // 重点:获取 span 最小宽度,设置当前列,注意这里加了 20,字段较多时还是有挤压,且渲染后的 div 内左右 padding 都是 10,所以 +20 。(可能还有边距/边框等值,需要根据实际情况加上)
                    column.minWidth = span.getBoundingClientRect().width + 50;
                    // 移除 document 中临时的 span
                    document.body.removeChild(span);
                    return h('span', column.label);
                },

内容来源于网络,记录在这里是,方便日后查看

你可能感兴趣的:(html,javascript,css)