el-table 表头文字超长鼠标移入悬浮显示

学不废

已于 2023-01-17 15:38:18 修改

阅读量718

点赞数

文章标签： javascript vue.js 前端

于 2023-01-17 15:36:43 首次发布

本文链接：https://blog.csdn.net/weixin_48853103/article/details/128716899

版权

**效果：
在这里插入图片描述
添加: render-header=“renderHeader” 方法

<el-table-column
                    v-for="item in headData"
                    :prop="item"
                    :label="item"
                    :key="item"
                    :render-header="renderHeader"
                    show-overflow-tooltip>
</el-table-column>

css添加：

.el-table .cell {
    word-break: keep-all !important;
    white-space: nowrap !important;
}

methods：

renderHeader(h, data) {
  return h("span", [
    h(
	    "el-tooltip",
	 {
	   attrs: {
		   class: "item",
		   effect: "dark",
		   content: data.column.label,
		   placement: "top",
  		 },
     },
     [h("span", data.column.label)]
    ),
    ]);
  },
```****