iview(View UI)使用 Vue 的 Render 函数，自定义表格列头显示内容（renderHeader）

开发中遇到这样一个需求，该项目用的是iview UI组件，需求是：
表格列头有一个字段和一个单位，两者样式不同，理想效果如下：“建筑面积四个字为18px、单位（㎡）为16px”。

如果按照iview—table表格默认的title属性赋值，那这个字段以及单位的样式就会一样，均为18px。如下图：

这时候打开iview官网看到这样一个属性：renderHeader。
官方是这样定义的：自定义列头显示内容，使用 Vue 的 Render 函数。传入两个参数，第一个是 h，第二个为对象，包含 column 和 index，分别为当前列数据和当前列索引。

既然提供了这个属性，那就可以说很方便了，具体怎么使用呢。

注释掉原有的title属性，加上renderHeader，示例代码如下：

{// title: '建筑面积（㎡）',key: '****', // 对应列内容的字段名slot: "****", // 插槽width: '110px',align: 'center',renderHeader: (h, params) => { // Render 函数,自定义列头显示内容return h('span',[h('span', '建筑面积'),h('span', {style: {color:'#01DAF5',fontSize: '16px'}}, '（㎡）'),])},
},

效果如下：

至此，实现效果。

iview(View UI)使用 Vue 的 Render 函数，自定义表格列头显示内容（renderHeader）相关推荐

vue使用render函数自定义标签动态导入js文件
文章目录问题背景解决思路知识加油站 Render函数 createElement参数代码实现问题背景项目中需要引入国网思极地图,但是因为pc端的项目一般都是部署到内网.该项目要同时部署到2 ...
vue之 render函数入门篇
目录 vue之 render函数入门篇简单渲染一个 h1 标签简单渲染一个 ul 与 li 默认插槽与具名插槽 vue之 render函数入门篇 render: function (cre ...
Vue.js render函数的数据双向绑定
在Vue.js render函数中数据双向绑定较为复杂.
vue.js render函数怎么传入自定义组件
vue.js render函数怎么传入自定义组件和定义子组件的用法一样 import Test from '@/components/Test' export default { render:(h ...
vue之Render函数
(1)什么是Render函数先来看一个场景,在博客网中,一般有一级标题.二级标题.三级标题...,为了方便分享url,它们都做成了锚点,点击后,会将内容加载网址后面,以#分隔. 例如'特性'是一个& ...
【Vue】render函数使用和详解
前言在平时编程时,大部分是通过template来创建html.但是在一些特殊的情况下,使用template方式时,就无法很好的满足需求,在这个时候就需要通过JavaScript 的编程能力来进行操 ...
vue中render函数的作用及解析
在vue脚手架的main.js文件中,存在这样一段代码: 意思是对vue实例的配置,其中render函数的作用是,将h创建的Node节点信息return返回给Vue.js底层处理文件中的beforeM ...
Vue的render函数
1.template模板父组件:App,子组件:Test app.vue中 <template><div id="app"><h1>这是app ...
vue的render函数用法
1.render简介前面我们的组件的模板都是在模板里写的(template),模板最后都会被vue编译成virtual dom(虚拟dom),在某些情况下模板可能不好用,例如需要实现一个动态的文章标 ...

iview(View UI)使用 Vue 的 Render 函数，自定义表格列头显示内容（renderHeader）

iview(View UI)使用 Vue 的 Render 函数，自定义表格列头显示内容（renderHeader）相关推荐

最新文章

热门文章