element-ui 组件中表格组件如何通过renderheader实现自定义表头样式

ppylox
·8/9/2021·0 阅读
AI 摘要模型根据正文自动生成,仅供参考

在 element-ui 表格中,通过为列设置 render-header 属性并在 methods 中定义对应方法,可实现自定义表头样式。核心是用 h 方法构建标签结构:h(标签元素, 标签属性, 子标签),省略第二参数时会自动解析到第三参数。示例中在表头文字后添加 el-popover 包裹的警告图标,配置 content、placement、trigger 属性,鼠标悬停显示提示信息,并通过 slot="reference" 绑定触发元素,实现带提示的自定义表头。

element-ui 官网介绍的比较简单。

首先在需要自定义样式的列上定义好方法render-header,然后再methods里面定义好对应的headercellclassname方法


<el-table\n :data="tableData"\n style="width: 100%">

     <el-table-column\n prop="date"\n label="日期"\n width="180"></el-table-column> 

     <el-table-column\n prop="name"\n label="姓名"\n width="180"></el-table-column> 

     <el-table-column\n prop="address"\n label="地址" :render-header="headercellclassname"></el-table-column>

</el-table>


该方法实现了在地址这一列的标头后面添加了一个图标,鼠标hover上去的时候显示对应的提示信息。

主要通过h方法定义标签,属性以及子标签。

h 方法的参数说明,主要由四个参数:

h(a,b,c,d)

a: 标签元素

b:标签文本

c:标签属性

d: 下级标签


从实际情况看,如果不穿传第二个参数,会默认解析到第三根参数,比如一下方法就没有传第二个参数,也能正常解析。

headercellclassname(h, { column, $index }) {

    // 自定义表格label样式

      return h("div", [

        h("span", column.label),

        h(

          "el-popover",

          {

            props: {

              content: "最多显示5位责任人,如有更多责任人,请进入项目详情查看",

              placement: "top",

              trigger: "hover",

            },

          },

          [

            h("span", {

              class: "el-icon-warning",

              style: "color:#c7c9d4",

              slot: "reference",

            }),

          ]

        ),

      ]);

    },

相关文章

评论 (0)

暂无评论,来写第一条吧