iview的render函数使用

 

render渲染函数详解 http://www.javashuo.com/article/p-cegvamuq-hs.html

iview表格的render函数做用是自定义渲染当前列，权限高于key，因此使用了render函数，那么表格的key值就无效了。render函数传入两个参数，第一个是 h，第二个是对象，包含 row、column 和 index，分别指当前单元格数据，当前列数据，当前是第几行。

具体用法：

render:(h,params) => {
return h(" 定义的元素 "，{ 元素的性质 }，" 元素的内容"/[元素的内容])
}
一、通常状况：若是只有单文本状况下，直接生成数据便可，

<template>
<Table border :columns="columns7" :data="data6"></Table>
</template>
<script>
export default {
data () {
return {
columns7: [
{
title: 'Name',
key: 'name'
},
{
title: 'Age',
key: 'age'
},
{
title: 'Address',
key: 'address'
},
{
title: 'Action',
key: 'action',
width: 150,
align: 'center',
render: (h, params) => {
return h('div', [
h('Button', {
props: {
type: 'primary',
size: 'small'
},
style: {
marginRight: '5px'
},
on: {
click: () => {
this.show(params.index)
}
}
}, '查看'),
h('Button', {
props: {
type: 'error',
size: 'small'
},
on: {
click: () => {
this.remove(params.index)
}
}
}, '删除')
]);
}
}
],
data6: [
{
name: 'John Brown',
age: 18,
address: '北京市',
city:'北京市市辖区',
disrect:'朝阳区公园南门门口'
},
{
name: 'Jim Green',
age: 24,
address: '湖北省',
city:'武汉市',
disrect:'武昌区武汉大学北门食堂'
},
{
name: 'Joe Black',
age: 30,
address: '江苏省',
city:'苏州市',
disrect:'昆山市张浦镇新吴街'
},
{
name: 'Jon Snow',
age: 26,
address: '上海市',
city:'陆家港',
disrect:'上海东方明珠立交桥'
}
]
}
},
methods: {
show (index) {
this.$Modal.info({
title: 'User Info',
content: `Name：${this.data6[index].name}<br>Age：${this.data6[index].age}<br>Address：${this.data6[index].address}`
})
},
remove (index) {
this.data6.splice(index, 1);
}
}
}
</script>
<style>
.ivu-table-wrapper{
width: 800px;
margin: 0 auto;
}
</style>

二、自定义文本，而且给文本加上样式

依照上例：

{
title: 'Age',
key: 'age',
render:(h,params)=>{
return h('span',{
style:{
color:"red",
fontSize:'22px'
}
},params.row.age)
}
上面的例子给年龄加了字体颜色和字体大小，年龄数据被包含在span标签里，同时咱们能够在style里面设置相应的字体属性。（注：在style里面写属性，不能使用横杠，有横杠的应该用大写，好比fontSize）;同时咱们也能够在后面为其添加单位

{
title: 'Age',
key: 'age',
render:(h,params)=>{
return h('span',{
style:{
color:"red",
fontSize:'22px'
}
},params.row.age+'岁')
}
仍是上例，咱们改变地点，将地点的省市区都显示在表格上

{
title: 'Address',
key: 'address',
render:(h,params)=>{
return h('span',{},params.row.address+params.row.city+params.row.disrect)
}

三、添加按钮，或将按钮变为icon图标

好比上例表格，添加的两个按钮

render: (h, params) => {
return h('div', [
h('Button', {
props: {
type: 'primary',
size: 'small'
},
style: {
marginRight: '5px'
},
on: {
click: () => {
this.show(params.index)
}
}
}, '查看'),
h('Button', {
props: {
type: 'error',
size: 'small'
},
on: {
click: () => {
this.remove(params.index)
}
}
}, '删除')
]);
}
props表示元素属性，有type，size等属性；style用来改变元素的样式；on表示元素的事件名，若是是点击事件，就用click，若是是失去焦点事件，则是blur。

引伸：若是使用icon图标来代替Button组件，写法相似，只不过将元素名称换成icon，props里的type换成对应的图标名称便可。

render: (h, params) => {
return h('a', [
h('a',[
h('Icon', {
props: {
type: 'ios-search',
size:'18',
},
attrs:{
title:'查看'
},
style: {
cursor:'pointer',
color:'#009688',
fontSize:'22px',
},
on: {
click: () => {

}
}
}),
]),
]);
}
此时，末尾的查看等文字不可见；若是想要当鼠标移上去的时候，显示图标含义，那么再加上attrs属性，给其title名便可。

四、添加属性，让文字在一排显示，超过省略号表示

表格提供了一个ellipsis属性，设置为true，可让文字在一排显示，超过表格宽度则用省略号代替。使用这个属性的话，当鼠标移上去时，是不能显示详细信息的。

表格还提供了一个tooltip属性，设置为true时，可让文字在一排显示，超过表格宽度则用省略号代替，同时当鼠标移上去时，能够显示详细信息。

但这个属性在使用了render函数自定义下是无效的，须要再作处理。好比，咱们将上例中的地址改变一下

{
title: 'Address',
key: 'address',
render:(h,params)=>{
let texts = '';//表格显示的文字
texts = (params.row.address+params.row.city+params.row.disrect).substring(0, 6) + ".....";
let str='';//鼠标移入时显示的文字
str=params.row.address+params.row.city+params.row.disrect;
return h(
"tooltip",
{
props: {
placement: "bottom",
transfer: true,
marginLeft:'-30px'
}
},
[
texts,
h(
"span",//控制文字样式，能够换行显示
{
slot: "content",
style: { whiteSpace: "normal", wordBreak: "break-all" }
},
str
)
]
)
}
}

五、表格里嵌入下拉框或下拉菜单

在表格里嵌入下拉框或下拉菜单也是一种常见的设计，实现方式以下：

{
title: '下拉',//纵列表头(相似于th)
width:140, //列表每一格的宽度
align: 'center', //ivew里面的写法,不用理会
key: 'region', //ivew里面的写法,不用理会
render: (h, params) => {
return h('Select', {
on: {
'on-change':(event) => {
console.log(event);
}
},
},
this.volumeTypes.map(function(type){//这个数组须要在data中定义,里面是一个个对象,每一个对象里面应当包含value属性(由于要用到)
return h('Option', {
props:{
value:type.label,//点击事件的值
label:type.value//下拉框的值
}
}, type);
})
)
},
}
volumeTypes在data里的定义数组
volumeTypes:[
{
value:'a',
label:1
},
{
value:'b',
label:2
}
]

在控制台打印为1,2.显示a,b。须要注意的是：在这个change事件中，‘on-change’须要拆开显示，不然不生效，像网上有的是连在一块儿‘onChange’来显示的，没有实现成功。

在表格中放入下拉菜单的方法大同小异

{ title: '品种', width:100, align: 'center', key: 'varieties', render: (h, params) => { return h('Dropdown',{ props:{ trigger:"click" }, on:{ 'on-click':(value)=>{ console.log(value);//value和下面选项的name对应 } } //iview组件内部的属性定义在其标签的对象里 }, [//盒子内部其余标签元素放入数组中 h('a',[//建立一个a标签,a标签里面又有元素,继续放入后面数组 h('span','下拉'),//span中的内容 h('Icon',{ props: { type: 'md-arrow-dropdown', size:'18' } }) ]), h('DropdownMenu',{//建立一个和a标签同级的标签 slot:"list"//iview组件内部的属性定义在其标签的对象里 }, this.dropdownItems.map(function(type){//把map看做循环,type看做循环的每一项 return h('DropdownItem',{ props:{ name:type.val } },type.val) }) ) ]); } },对于render函数而言，咱们能够将h看做一个建立元素的字段,建立好这个元素以后,须要添加样式或者作其余操做,后面跟着一个对象(里面是属性和方法)或者数组(该元素的子元素)就行。涉及到的几个属性无外乎props,style，on，attrs等--------------------- 做者：weixin_38384967 来源：CSDN 原文：https://blog.csdn.net/weixin_38384967/article/details/83142348 版权声明：本文为博主原创文章，转载请附上博文连接！