iview的render函数使用
render渲染函数详解 https://www.cnblogs.com/weichen913/p/9676210.html
iview表格的render函数作用是自定义渲染当前列,权限高于key,所以使用了render函数,那么表格的key值就无效了。render函数传入两个参数,第一个是 h,第二个是对象,包含 row、column 和 index,分别指当前单元格数据,当前列数据,当前是第几行。
具体用法:
render:(h,params) => {
return h(" 定义的元素 ",{ 元素的性质 }," 元素的内容"/[元素的内容])
}
1、一般情况:如果只有单文本情况下,直接生成数据即可,
<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>
2、自定义文本,并且给文本加上样式
依照上例:
{
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)
}
3、添加按钮,或将按钮变为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名即可。
4、添加属性,让文字在一排显示,超过省略号表示
表格提供了一个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
)
]
)
}
}
5、表格里嵌入下拉框或下拉菜单
在表格里嵌入下拉框或下拉菜单也是一种常见的设计,实现方式如下:
{
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
版权声明:本文为博主原创文章,转载请附上博文链接!
iview的render函数使用的更多相关文章
- iview中render函数监听事件
iview的table中添加datepicker在组件中嵌套组件,如果需要监听子组件的自定义事件,应该使用render中的on:{ 'on-change' () => { console.log ...
- iview,用render函数渲染
<Table border :columns="discountColumns" :data="discountData.rows"></Ta ...
- [转]iview的render函数用法
原文地址:https://www.jianshu.com/p/f593cbc56e1d 一.使用html的标签(例如div.p) 原生标签用法 二.使用iview的标签(例如Button) iview ...
- [转]iview render函数常用总结(vue render函数)
原文地址:https://blog.csdn.net/weixin_43206949/article/details/89385550 iview 的render函数就是vue的render函数ivi ...
- iview使用之怎样通过render函数在table组件表头添加图标及判断多个状态
在实际项目开发中,我们经常会用到各种各样的表格,比如在表格中填加下拉菜单,按钮,图标及可以根据状态显示对应文字等等,因为这段时间一直在做后台管理系统,所以表格用的就比较多,当然UI组件库我用的是ivi ...
- iview中table的render()函数
Vue 推荐在绝大多数情况下使用 template 来创建你的 HTML.然而在一些场景中,你真的需要 JavaScript 的完全编程的能力,这就是 render 函数,它比 template 更接 ...
- iview使用之怎样通过render函数在tabs组件中添加标签
在实际项目开发中我们通常会遇到一些比较'新颖'的需求,而这时iview库里往往没有现成可用的组件示例,所以我们就需要自己动手翻阅IviewAPI进行自定义一些组件,也可以说是将iview库里的多种组件 ...
- iview table表中使用render函数props传值出现问题
使用iview中的table表格时避免不了使用render函数渲染自定义内容,或者渲染组件.但是在正常使用时出现了props传值无法识别, 按照官网介绍使用props如下: render: (h, p ...
- iview table中的render函数使用
1.表格列数据内容过多可以用以下两个属性解决: ellipsis:"true', tooltip:true 使每个列的内容如果过多的话变为省略号 2.table中的render函数(实现根据 ...
随机推荐
- spring boot web 开发及数据库操作
推荐网站http://springboot.fun/ 1.json 接口开发 2.自定义 filter 3.自定义 property 4.log 配置 5.数据库操作 6.测试
- ui-choose|列表选择jQuery美化插件
ui-choose是一款基于jQuery的列表选择美化插件.ui-choose可用于选项不太多的select.radio.checkbox等,提升用户体验. 使用方法 使用ui-choose列表美化插 ...
- jQuery实现button按钮提交表单
在JSP页面中,通常使用button按钮提交表单数据,使用jQuery实现代码如下: <span style="font-family:Comic Sans MS;font-size: ...
- SpringMVC源码剖析1——执行流程
SpringMVC源码剖析1——执行流程 00.SpringMVC执行流程file:///C:/Users/WANGGA~1/AppData/Local/Temp/enhtmlclip/Image.p ...
- html一个页面链接携带参数跳转另一个页面基于vue2.0的element框架
来给生活比个耶! 1.按钮 <el-button @click="albumList(scope.row.id)" size="mini" type=&q ...
- [SDOI2008] 洞穴勘测 (LCT模板)
bzoj 2049 传送门 洛谷P2147 传送门 这个大佬的LCT详解超级棒的! Link-Cut Tree的基本思路是用splay的森林维护一条条树链. splay的森林,顾名思义,就是若干spl ...
- scrollIntoView 前的元素滚动到浏览器窗口的可视区域内 不止垂直滚动,还有水平滚动
Element.scrollIntoView() 方法让当前的元素滚动到浏览器窗口的可视区域内 element.scrollIntoView(); // 等同于element.scrollIntoVi ...
- Rails (栈)
题目链接:https://vjudge.net/problem/UVA-514 题目大意: 有A,B,C三个火车停靠点,火车最初停在A站,给你一个序列,问你能不能通过中转站C到达B站,火车从A站进入到 ...
- React.js/HTML5和iOS双向通信
最近,我使用WKWebView和React.js进行双向通信,自己写了React.js嵌入到Native中. Native操作Web,通过两种方式传值 第一种,通过JS传值给Native 通过这种方式 ...
- Linux下运行命令出现is not in the sudoers file的问题
原因: 用户没有加入到sudo的配置文件里. 解决方法: 1.切换到root用户,运行visudo命令: 2.找到root ALL=(ALL) ALL,在下面添加一行 xxx ALL=(ALL) ...