element-ui中table表格中，表头文本隐藏

嘿~-

于 2023-10-25 09:50:59 发布

阅读量570

点赞数

分类专栏： vue js 前端文章标签： ui vue.js javascript

本文链接：https://blog.youkuaiyun.com/weixin_47728768/article/details/134027682

版权

在element-ui中，table表格中，表头内容进行文本隐藏

利用el-table-column中的属性：render-header，可具体查看element-ui文档；

<el-table-column
	:render-header="renderHeader" label="文本文本文本文本文本文本文本文本文本文本文本文本文本">
</el-table-column>

<script>
    export default {
         methods:{
             renderHeader(h,{column,$index}){
                 "div",
                     {
                     slot:"content",
                     class:"table-header-flex",
                     style:{
                         width:"100%"
                     }
                 },
                     [
                     h(
                     "el-tooltip",   // 利用el-toolpic对隐藏文本进行提示
                     {
                         props:{
                             placement:"top"
                         }
                     },