iview UI库中table的render函数

刚刚接触一个项目，一期使用的是iview，查看文档时发现并未介绍到render函数中类似createElement功能的用法，因此想做一个相关的分享，希望可以帮到跟我有类似需求的小伙伴们。

iview官方文档中对render是这样描述的：

自定义渲染列，传入三个参数 row、column 和 index，分别指当前单元格数据，当前列数据，当前是第几行，详见示例

自定义列模板 #

通过给 columns 数据的项，设置一个函数 render，可以自定义渲染当前列，包括渲染自定义组件。（很强大，下面会讲到）

render 函数传入三个参数 row、column 和 index，分别指当前单元格数据，当前列数据，当前是第几行（其实一般就是第几条数据）。

render 函数本质返回的是字符串，Table 组件在内部对其进行了编译，如果使用了自定义组件，需要特别注意上下文，编译后的自定义组件，默认的上下文是 i-table 所在的上下文，如果想让组件在指定的实例下编译，可以给 i-table 设置属性 content 来指定上下文，比如本例指定当前路由页为上下文。一般情况不需要此配置，但如果你把 i-table 作为一个 slot 封装在其它组件里，这时 content 属性就很有用，比如父级是 $parent，根组件 $root。

<template><i-table border :content="self" :columns="columns7" :data="data6"></i-table>
</template>
<script>export default {data () {return {self: this,columns7: [{title: '姓名',key: 'name',render (row, column, index) {return `<Icon type="person"></Icon> <strong>${row.name}</strong>`;}},{title: '年龄',key: 'age'},{title: '地址',key: 'address'},{title: '操作',key: 'action',width: 150,align: 'center',render (row, column, index) {return `<i-button type="primary" size="small" @click="show(${index})">查看</i-button> <i-button type="error" size="small" @click="remove(${index})">删除</i-button>`;}}],data6: [{name: '王小明',age: 18,address: '北京市朝阳区芍药居'},{name: '张小刚',age: 25,address: '北京市海淀区西二旗'},{name: '李小红',age: 30,address: '上海市浦东新区世纪大道'},{name: '周小伟',age: 26,address: '深圳市南山区深南大道'}]}},methods: {show (index) {this.$Modal.info({title: '用户信息',content: `姓名：${this.data6[index].name}<br>年龄：${this.data6[index].age}<br>地址：${this.data6[index].address}`})},remove (index) {this.data6.splice(index, 1);}}}
</script>

以上这些是官方文档描述和基础用法，这边博客记录的主要目的是记录接下来的用法。
语法：render:(h,params)=>{}
具体用法：

render:(h,params) => {return h(" 定义的元素 "，{ 元素的性质 }，" 元素的内容"/[元素的内容])
}

定义的元素例如：div、span、p等等

元素的性质如：{style:{color:'red'}}、{ props: { src:'',value:'' }、 on: { click: () => { this.upRow(params) } } // 绑定的事件

元素的内容：可以进行标签的嵌套或者显示字符串的内容

{title: '操作',key: 'action',align: 'center',width: 155,render: (h, params) => {return h('div', [ // 嵌套的标签h('Button', {props: {size: 'small'},style: {marginRight: '5px',fontSize: '12px',borderColor: '#5cadff'},on: {  // 绑定的事件click: () => {this.upRow(params)}}}, '上移'),  // 字符串文字h('Button', {props: {size: 'small'},style: {marginRight: '5px',fontSize: '12px',borderColor: '#5cadff'},on: {click: () => {this.downRow(params)}}}, '下移'),h('img', {attrs: {  // src是html的属性（attr）而不是组件的属性（props）src: ''},})，h('img', {domProps: {  // 也可以使用domProps属性src: ''},})])}},

iview UI库中table的render函数相关推荐

Vue项目中Table设置 render 函数
statusList1: {0: "",1: "",2: "药品服务费收入",3: "特药服务费收入",4: " ...
antd table设置表格一个单元格的字体颜色_开源 UI 库中，唯一同时实现了大表格虚拟化和树表格的 Table 组件
背景有这样一个需求,一位 React Suite (以下简称 rsuite)的用户,他需要一个 Table 组件能够像 Jira Portfolio 一样,支持树形数据,同时需要支持大数据渲染. 截 ...
Henry前端笔记之 UI组件库中table与slot相关理解
Henry前端笔记之 UI组件库中table与slot相关理解作用域插槽: 解构赋值基础:https://developer.mozilla.org/zh-CN/docs/Web/JavaScrip ...
python中求和公式是什么函数_Python的math库中,用于求和的函数是( )。
[单选题]确定兴利库容 V 兴 ,已知某水库为一回运用水库,其一次蓄水量为 V 1 =300 万 m 3 ,一次供水量为 V 2 =150 万 m 3 . [ ]. [单选题]hAB大于0说明B点的高 ...
c++调用gcd函数_c++函数库中一些实用的函数
有一些程序,虽然写起来不难,但是可能比较麻烦或容易出错,这时就可以用c++函数库里自带的一些实用的函数. 这里只记录一些不太常见的函数. ------------------------------- ...
如何使用一个库中不存在的函数
Windows是一个不断发展的系统,很多新的 API 在操作系统更新时更新,而MASM32开发包一般在很长一段时间内都无法及时更新,如果需要在编程中使用新添加的API函数.就得自己动手来更手库文件,下 ...
使用Python PIL库中的Image.thumbnail函数裁剪图片
发现自己还没有头像,想着上传ubuntu系统中我很喜欢的一个背景图片来当头像,但是因为图片过大,上传失败了.那么,我们如何使用python中强大的PIL库来进行图片裁剪呢? from PIL impo ...
Material组件库中table组件的sticky属性
sticky 英文字面意思是粘,粘贴,所以姑且称之为粘性定位 .我们先看下在Angular中如何使用. 当我们需要固定住头部的时候,只需要在mat-header-row 加上 sticky: true ...
iView UI库解决基于vue.js解决table中this的指向问题
this指向全局变量data的数据 html <i-table ref="tables" editable searchable search-place="top ...

iview UI库中table的render函数

iview UI库中table的render函数相关推荐

最新文章

热门文章