iview中table的render()函数
Vue 推荐在绝大多数情况下使用 template 来创建你的 HTML。然而在一些场景中,你真的需要 JavaScript 的完全编程的能力,这就是 render 函数,它比 template 更接近编译器
全文参考https://www.jianshu.com/p/f44a32f83cc8 的思路写出来的。着急的小伙伴可以直接看她写的,很棒~
iview官网例子
第一次看iview的时候都蒙蔽了,不知道啥是render,紧跟着后面那么多东西,然后今儿给缕一缕。
首先把官网的代码copy下来放到自己运行的vue项目中
数据都是动态的,emmmm,看一下最长的就是第一个姓名,然后我看不懂,不要慌往下看。。。
我改了一下,从写死的数据开始
这里我表格里的姓名,都是写死的数据,并且加了样式
{
title: '姓名',
key: 'name',
render: (h, params) => {
return h('div', { //写你要创建的元素的标签名
style:{ //写元素的样式(注意text-align等有‘-’的css属性需要删掉‘-’,‘-’后的字母变大写,否则报错)
width:'160px',
height:'100px',
background:'#ccc',
textAlign:'center',
lineHeight:'100px',
}
}, '小明') //写元素的内容
}
},
然后我希望一个单元格里放俩元素代码
{
title: '姓名',
key: 'name',
render: (h, params) => {
return h('div', {
style:{
width:'120px',
height:'100px',
background:'#ccc',
textAlign:'center',
lineHeight:'100px',
}
},[h('p',{ style:{
color:'red',
}
},'爱吃草')],'小明') //以数组的形式括起来内容,看我给他一个文字颜色
}
},
惊呆了,我的小明去哪里了!!!
如图可见,当元素嵌套时,元素里面的内容会覆盖父元素的内容
解决方法:我再套一个元素
{
title: '姓名',
key: 'name',
render: (h, params) => {
return h('div', {
style:{
width:'120px',
height:'100px',
background:'#ccc',
textAlign:'center',
lineHeight:'100px',
float:'left',
}
}, [
h('p',{ style:{
color:'red',
float:'left',
}
},'爱吃草'),
h('p',{ style:{ //我嵌套的元素
color:'yellow',
float:'left',
}
},'爱吃饭')
],'小明')
}
},
反正我现在是大概知道这个render咋用的了
{
title:'地址',
key:'address',
render:(h,params) =>{
return h('div',{
style:{
backgroundColor:'skyblue',
},
},params.row.address)
}
},
点击事件直接在第二个参数里加就可以(官网有例子)
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)
}
}
}, '删除')
]);
}
//h: vue Render函数的别名(全名 createElement)即 Render函数 //params: table 该行内容的对象 //props:设置创建的标签对象的属性 //style:设置创建的标签对象的样式 //on:为创建的标签绑定事件 //所以代码中的render函数,即创建的一个div中包裹一个button按钮,同时给button设置了相关属性和绑定事件
补充:在表格里插入输入框,在官网上有两种方法。今天只说一种:
我的代码
template
<Table border :columns="columns7" :data="data6" width="600"></Table>
{{data6}}
<br />
<button @click="add" type="primary">添加点我啊啊啊啊啊</button>
data
columns7: [
{
title: '姓名',
key: 'name',
render:(h,params) =>{
return h('Input',{
props:{
value:params.row.name,
size:'small'
},
on:{
input:(val) =>{
this.data6[params.index].name = val
}
}
})
}
}, {
title: '年龄',
key: 'age',
render:(h,params)=> {
let b = []
let DataList = [
{
value: '0',
label: '这是0',
},
{
value: '1',
label: '这是1',
},
{
value: '2',
label: '这是2',
},
{
value: '3',
label: '这是3',
}
]
DataList.forEach(item=>{
b.push(h('Option', {
props: {
label: item.label,
value: item.value
},
}, item))
})
return h('Select', {
props: {
// value: this.data6[params.index].age,
label:this.data6[params.index].age,
size:'small',
},
on: {
input: (val) => {
this.data6[params.index].age = val
}
},
}, b)
}
},
{
title:'地址',
key:'address',
render:(h,params) =>{
return h('Input',{
props:{
value:params.row.address,
size:'small'
},
on:{
input:(val) =>{
this.data6[params.index].address = val
}
}
})
}
}, {
title: '操作',
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: 2,
address: 'New York No. 1 Lake Park'
},
{
name: 'Jim Green',
age: 1,
address: 'London No. 1 Lake Park'
},
{
name: 'Joe Black',
age: '0',
address: 'Sydn12323ey No. 1 Lake Park'
},
{
name: 'Jon Snow',
age: 2,
address: 'Ottawa No. 2 Lake Park'
}
]
method
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}`
})
},
add(){
this.data6.push({
name:'',
age:'',
address:'', })
},
remove (index) {
this.data6.splice(index, 1);
}
iview中table的render()函数的更多相关文章
- iview 中table列 一列显示多个数据(后台返回数组显示在列内)
一.首先出现的是比较复杂的一种情况(多个key) 1.首先页面显示效果如下 2.后台返回数据格式如下: 3.在iview中table的columns中的render函数: 4.具体代码 render: ...
- iview中table里嵌套i-switch、input、select等
iview中table内嵌套 input render:(h,params) => { return h('Input',{ props: { value:'', size:'small', } ...
- iview中table多选、加载更多、下载等使用
记录工作中的点点滴滴,为回忆过往添加片片记忆... 一.Table 1.使用render函数多层渲染以及表格可展开使用 源码地址:https://gitee.com/Mandy_wang/iview- ...
- iview table的render()函数的用法
语法:render:(h,params)=>{} render:(h,params) => { return h(" 定义的元素 ",{ 元素的性质 }," ...
- iview table的render()函数基本的用法
render:(h,params) => { return h(" 定义的元素 ",{ 元素的性质 }," 元素的内容"/[元素的内容]) }
- iview table表中使用render函数props传值出现问题
使用iview中的table表格时避免不了使用render函数渲染自定义内容,或者渲染组件.但是在正常使用时出现了props传值无法识别, 按照官网介绍使用props如下: render: (h, p ...
- iview table中的render函数使用
1.表格列数据内容过多可以用以下两个属性解决: ellipsis:"true', tooltip:true 使每个列的内容如果过多的话变为省略号 2.table中的render函数(实现根据 ...
- iview使用之怎样通过render函数在tabs组件中添加标签
在实际项目开发中我们通常会遇到一些比较'新颖'的需求,而这时iview库里往往没有现成可用的组件示例,所以我们就需要自己动手翻阅IviewAPI进行自定义一些组件,也可以说是将iview库里的多种组件 ...
- iview中render函数监听事件
iview的table中添加datepicker在组件中嵌套组件,如果需要监听子组件的自定义事件,应该使用render中的on:{ 'on-change' () => { console.log ...
随机推荐
- 图片上传的ImageIO工具类
ImageIO类说明 最近的项目中遇到ImageIO,因此记录下这个类的用法 一.ImageIO: 这个类中的方法都是静态方法,可以用来进行简单的图片IO操作 1.读入的三种方法 public sta ...
- ListControl 设置表格行高与字体
设置行高: CImageList m_l; m_l.Create(1,18,TRUE|ILC_COLOR32,1,0); listCtrl.SetImageList(&m_l,LVS ...
- angularjs 1 Failed to read the 'selectionStart' property from 'HTMLInputElement':
在找angularjs input(type='number')在获取焦点的时候,文本框内容选中效果,参考了:Select text on input focus,我直接复制他的code之后,在ion ...
- Windows相关命令
1.查看端口8080被哪个进程占用 netstat -ano | findstr "8080" 2.查看进程号为5768对应的进程 tasklist | findstr " ...
- poj3167- Cow Patterns
传送门 两个串相等定义为串中每一位排序后的相对大小相等. 一位相等等价于这一位前面比他小的和等于他的数的个数相等. 那么用kmp,比较的时候比较这两个个数就可以了. 一开始很瓜地想,询问一段区间内比我 ...
- 洛谷P5338 [TJOI2019]甲苯先生的滚榜
原题链接洛谷P5338 [TJOI2019]甲苯先生的滚榜 题目描述 甲苯先生在制作一个online judge,他发现做比赛的人们很关心自己的排名(显而易见),在acm赛制的比赛中,如果通过题目数量 ...
- 移动端自定义键盘的vue组件 ----keyboard
<style scoped lang="less"> .keyboard { /* height: 250px; */ width: 100%; position: f ...
- 【转载】Fiddler抓包及模拟服务端
此文章转载公众号‘云测学院'链接:https://mp.weixin.qq.com/s/qXmBDh980nBJ8IchbRGC3Q 及公众号gloryroadtrain 在HTTP接口的测试过程中, ...
- Redis学习笔记01-分布式锁
1.分布式锁的定义与理解 在并发任务中,当对数据执行修改和删除时为了防止多个任务同时拿到数据而产生的混乱,这时就要用到分布式锁来限制程序的并发执行. Redis分布式锁本质上要实现的目标就是在Redi ...
- VIsualSVN server 安装及旧仓库导入
安装参考: 1, http://www.cnblogs.com/xiaobaihome/archive/2012/03/20/2407610.html SVN服务器搭建和使用(一) Subversi ...