element ui table render-header自定义表头信息使用

Acceml 发布于2019-08-02 11:12 / 1648人阅读

摘要：在使用自定义组件内容过程之中我们绝大多数情况下都是通过预先写好不同的模板，再通过传入不同的值来渲染不同的模板。

在使用vue自定义组件内容过程之中,我们绝大多数情况下都是通过预先写好不同的html模板，再通过props传入不同的值来渲染不同的模板。例如我们需要实现一个组件。传入不同的size，标题显示不同的字号大小，我们可能这样去实现这个组件：

这样做法显得代码过多，而且有时候我们需要真的JavaScript完全编程能力,即通过js代码生成html结构，再插入到页面之中。实现这样要求我们需要了解render函数。首先我们先了解三点

render方法的实质就是生成template模板；

通过调用一个方法来生成，而这个方法是通过render方法的参数传递给它的；

这个方法有三个参数，分别提供标签名，标签相关属性，标签内部的html内容

下面通过一个element ui自定义表格表头内容的功能来展示render函数使用。
页面代码部分：

js部分：使用render函数

 //自定义列标题内容
    renderHeader(h, { column, $index },index){
       return h("span", {}, [
        h("span", {}, "时间片段"),
        h("el-popover", { props: { placement: "top-start", width: "200", trigger: "hover", content: "领先/落后品类=单店平均单量-该品类城市店均单量" }}, [
           h("i", { slot: "reference", class:"el-icon-question"}, "")
          ])
       ])

    },

实现效果：

可以看到第一个函数参数即标签名，第二个为属性名组成的对象，第三个参数代表值，如果值依然包含html标签，我们可以使用数组来定义。以上就是本文全部内容。

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/52835.html

element ui table render-header自定义表头信息使用

摘要：在使用自定义组件内容过程之中我们绝大多数情况下都是通过预先写好不同的模板，再通过传入不同的值来渲染不同的模板。在使用vue自定义组件内容过程之中,我们绝大多数情况下都是通过预先写好不同的html模板，再通过props传入不同的值来渲染不同的模板。例如我们需要实现一个组件。传入不同的size，标题显示不同的字号大小，我们可能这样去实现这个组件：这样做...

zone 2019-08-29 16:20 评论0 收藏0
element ui table render-header自定义表头信息使用

摘要：在使用自定义组件内容过程之中我们绝大多数情况下都是通过预先写好不同的模板，再通过传入不同的值来渲染不同的模板。在使用vue自定义组件内容过程之中,我们绝大多数情况下都是通过预先写好不同的html模板，再通过props传入不同的值来渲染不同的模板。例如我们需要实现一个组件。传入不同的size，标题显示不同的字号大小，我们可能这样去实现这个组件：这样做...

lunaticf 2019-08-26 17:44 评论0 收藏0
步步向前之Element-UI

摘要：无效方案根据交易所小时成交量占比和实时价格加权计算得到渲染结果是一个包含了文字，同时有名为的，并无小图标，后边中括号结构里只能有一个有待考证。 Table 固定表头只要在el-table元素中定义了height属性，即可实现固定表头的表格，而不需要额外的代码。例如： ... 这里文档只给了一种固定高度250px的解决方案，实际应用大多数是需要自适应占满父元素，超出滚动固定表头的...

Imfan 2019-08-02 11:51 评论0 收藏0
步步向前之Element-UI

摘要：无效方案根据交易所小时成交量占比和实时价格加权计算得到渲染结果是一个包含了文字，同时有名为的，并无小图标，后边中括号结构里只能有一个有待考证。 Table 固定表头只要在el-table元素中定义了height属性，即可实现固定表头的表格，而不需要额外的代码。例如： ... 这里文档只给了一种固定高度250px的解决方案，实际应用大多数是需要自适应占满父元素，超出滚动固定表头的...

ZoomQuiet 2019-08-29 17:08 评论0 收藏0
步步向前之Element-UI

摘要：无效方案根据交易所小时成交量占比和实时价格加权计算得到渲染结果是一个包含了文字，同时有名为的，并无小图标，后边中括号结构里只能有一个有待考证。 Table 固定表头只要在el-table元素中定义了height属性，即可实现固定表头的表格，而不需要额外的代码。例如： ... 这里文档只给了一种固定高度250px的解决方案，实际应用大多数是需要自适应占满父元素，超出滚动固定表头的...

maxmin 2019-08-05 15:19 评论0 收藏0