render function role iview form a custom render the current column, authority higher than the key, so use the render function, then the key value table is invalid. render function with two arguments, the first is a H, the second object, comprising a row, column, and index, respectively, the data refers to the current cell, the current column of data, this is the first few lines.
Specific Usage:
the render: (H, the params) => {
return H ( "defined element", Nature {element} "content element" / [content elements])
}
1, general: If only a single text case, data can be generated directly,
<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: {
the Click: () => {
this.Show (params.index)
}
}
}, 'see'),
H ( 'the Button', {
The props: {
type: 'error',
size: 'Small'
},
ON: {
the Click: () => {
this.remove (params.index)
}
}
}, 'delete')
]);
}
}
],
Data6: [
{
name: 'John Brown' ,
Age: 18,
address: 'Beijing',
City: 'Beijing municipal districts',
disrect:' Chaoyang Park South Gate entrance '
},
{
name:' Jim Green ',
Age: 24-,
address:' Hubei Province '
city: 'Wuhan'
disrect: 'North Gate Wuchang District, Wuhan University canteen'
},
{
name: 'Joe Black',
Age: 30,
address: 'Jiangsu Province',
City: 'Suzhou',
disrect: 'New Wu Kunshan City Street '
},
{
name:' Jon Snow ',
Age: 26,
address:' Shanghai ',
City:' dry ports at home ',
disrect:' Shanghai Oriental Pearl overpass'
}
]
}
},
Methods: {
Show (index) {
. Modal.info the this $ ({
title: 'the User Info',
Content: `the Name: $ {this.data6 [index] .name} <br> Age: $ {this.data6 [index]} <br> .age the Address: $ {this.data6 [index] .Address `}
})
},
Remove (index) {
this.data6.splice (index,. 1);
}
}
}
</script>
<style>
.ivu-table-wrapper{
width: 800px;
margin: 0 auto;
}
</style>
2, custom text, and add text to the style
In accordance with the above example:
{
Title: 'Age',
Key: 'Age',
the render: (H, the params) => {
return H ( 'span', {
style: {
Color: "Red",
the fontSize: '22px'
}
}, the params. row.age)
}
the above example was added to the age of the font color and font size, age data is included in the span tag, we can set the corresponding font style attributes inside. (Note: Write in style inside the property, you can not use the bars, there are bars should be uppercase, such as fontSize); and we can also add to their units in the back
{
Title: 'Age',
Key: 'Age',
the render: (H, the params) => {
return H ( 'span', {
style: {
Color: "Red",
the fontSize: '22px'
}
}, the params. row.age + 'years old')
}
or the example above, we change the location, the provinces locations are shown on the table
{
title: 'Address',
key: 'address',
render:(h,params)=>{
return h('span',{},params.row.address+params.row.city+params.row.disrect)
}
3, the Add button, or the button becomes icon icon
Two buttons such as the example table, add
the render: (H, the params) => {
return H ( 'div', [
H ( 'the Button', {
The props: {
type: 'Primary',
size: 'Small'
},
style: {
marginRight: '5px'
} ,
ON: {
the Click: () => {
this.Show (params.index)
}
}
}, 'see'),
H ( 'the Button', {
The props: {
type: 'error',
size: 'Small'
} ,
ON: {
the Click: () => {
this.remove (params.index)
}
}
}, 'delete')
]);
}
the props represents an element property, there are type, size and other attributes; style used to change the style element ; on the name of the element represents an event, if the event is a click, use click, if lost focus event, it is a blur.
The idea: If you use the icon icon instead of a Button component, similar to the wording, but the element name changed icon, props in the type into the corresponding icon name.
the render: (H, the params) => {
return H ( 'A', [
H ( 'A', [
H ( 'Icon', {
The props: {
type: 'iOS-Search',
size: '18 ',
} ,
attrs: {
title: 'View'
},
style: {
Cursor: 'pointer',
Color: '# 009 688',
the fontSize: '22px',
},
ON: {
the Click: () => {
}
}
}),
]),
]);
}
in this case, the end of the viewing and other text is invisible; if you want to move up when the mouse when the icon is displayed meaning, then coupled with attrs attribute to its title name.
4, add an attribute, make your words in a row, more than ellipsis
Ellipsis table provides a property set to true, so that the text can be displayed in a row over the width of the table instead of the ellipsis. Using this attribute, then, when the hover, the details can not be displayed.
When the table also provides a tooltip property set to true, so that the text can be displayed in a row over the width of the table instead of the ellipsis, while when the hover, to display more information.
However, this property in use in custom render function is invalid, we need to do the processing. For example, we will in the example of a change of address
{
Title: 'the Address',
Key: 'address',
the render: (H, the params) => {
the let Texts = ''; // Text table shows
texts = (params.row.address + params.row.city + params.row.disrect) .substring (0,. 6) + ".....";
the let STR = ''; // displayed when the mouse into text
str = params.row.address + params.row.city + params.row.disrect;
return H (
"ToolTip",
{
The props: {
Placement: "bottom",
Transfer: to true,
marginLeft: '- 30px'
}
},
[
Texts,
H (
"span", // text style control may be shown with a line
{
slot: "Content",
style: {whiteSpace: "Normal", wordBreak: "All-BREAK"}
},
str
)
]
)
}
}
5, the form or pulldown menu drop-down boxes fitted
Embed the drop-down box or a drop-down menu is also a common design in the form, implementation is as follows:
{
Title: 'pull-down', // vertical column header (similar TH)
width: 140, the width of each grid // list
align: 'center', // ivew inside wording, ignore
key: 'region', // ivew inside wording, ignore
the render: (H, the params) => {
return H ( 'the Select', {
ON: {
'ON-Change' :( Event) => {
the console.log (Event);
}
},
},
this.volumeTypes.map (function (type) {// this data needs to be defined in the array, which is an object, each object which shall contain the value attribute (because to use)
return H ( 'Option- ', {
the props: {
value: type.label, // click event value
label: type.value // dropdown value
}
}, type);
})
)
},
}
volumeTypes defined in the data array
volumeTypes: [
{
value: 'A',
label:1
},
{
value:'b',
label:2
}
]
1,2 print display a, b at the console. Note that: In this change event, 'on-change' need to disassemble the show, or do not take effect, there is no successful as some online together 'onChange' to be displayed.
Methods put in drop-down menu in the table or less the same
{
Title: 'variety',
width: 100,
align = left: 'Center',
Key: 'Varieties',
the render: (H, the params) => {
return H ( 'the Dropdown', {
The props: {
Trigger: "the Click"
} ,
oN: {
'the Click-oN' :( value) => {
the console.log (value); // value and corresponding to the following options name
}
} // attribute definition iview internal components thereof in a subject's tag
}, [@ inside of the box element into the other tag array
H ( 'a', [a // create a label, a label which another element, continues into the back of the array
h ( 'span', 'pull-down') / / span contents
H ( 'Icon', {
the props: {
type: 'arrow arrow-MD-DropDown',
size: '18 '
}
})
]),
H (' DropdownMenu ', {// create a tag and a sibling label
slot: "list"// iview attribute defines the internal components thereof in a subject's tag
},
this.dropdownItems.map (function (type) {// cycle considered as the map, type considered cycles per a
return H ( 'DropdownItem', {
The props: {
name: type.val
}
}, type.val)
})
)
]);
}
},
then for the render function, we can h as a field elements of creation, created this element, you need to add style or do other operations, followed by an object (which is a property and method) or array (child elements) of the line. The property involved is nothing less than a few props, style, on, attrs, etc.
---------------------
Author: weixin_38384967
Source: CSDN
Original: https: // blog.csdn.net/weixin_38384967/article/details/83142348
Disclaimer: This article is a blogger original article, reproduced, please attach Bowen link!