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 版權聲明：本文爲博主原創文章，轉載請附上博文連接！