vue中render函数的使用
一:一些基本的元素h("Button",{props: {// 绑定属性size: 'small',type:"warning",disabled:params.row.billStatus == "3" ? true:false,level: {
·
①:render函数内部的属性与事件
h("Button",{ // 这里可以是button 也可以是input等其他标签
props: { // 绑定属性
size: 'small',
type:"warning",
disabled:params.row.billStatus == "3" ? true:false,
level: {
type: Number, // 数字类型 适用于输入框
required: true // 必填项
}
},
style: { //绑定样式
marginRight: '15px',
display:this.a //a为true 表示隐藏整个按钮
},
domProps:{ // DOM 属性
ref: 'baz'
},
attrs:{ // html特性
id:"box"
},
on:{ // 绑定事件
click:()=>{
this.cancellation(params.row.billNo)
},
"on-change":(value)=>{ // change事件
console.log("输出数据:",value.target.value)
}
}
},"作废"), // 显示的文字
②:用render函数渲染iview中的树结构Tree
一:首先直接引用组件里的Tree标签,它会在页面展示一个树结构,由于它data里没有数据会显示暂无数据。
示例:
<Tree :data="information" :render="renderContent" show-checkbox @on-check-change="clickCheckBox"></Tree>
二:要想页面以树结构的形式出来,里面的data数据必须是一个数组且里面要套很多个对象,对象里面是后台返回的字段,注意在字段里面一定要有一个children,它表示的是树结构展开的子结构,这个children是一个数组,数组里面包含的对象就是要渲染的子结构。可以一直这样套下去,套多少层就表示有多少层树结构。
示例:
展开之后是这样的。
三:在得到想要的数据之后就可以以树结构的形式显示出来了。但是要想在树结构里面添加input输入框就要用到render函数 。
<Tree :data="data5" :render="renderContent" ></Tree> 绑定一个函数。
四:函数里的数据。
renderContent(h,{root,node,data}){
if(data.last_status == "1"){ // 判断条件是否是最后一级
return h("div",[
h("span",data.servitemName), // data是所有的数据,data.servitemName
h("span",{ // 是树结构显示的数据
style:{
width:"100px",
height:'100%'
}
},
[
h("Input",{
style:{
width:'100px',
marginLeft:"20px",
},
attrs:{
placeholder:"请输入单价",
type:"number", // input类型是number
size:"small"
},
on:{
"on-change":(value)=>{ // 输入框输入的值赋值给data里某一个字段。
data.price = value.target.value
}
}
}),
h("Input",{
style:{
width:'100px',
marginLeft:"20px"
},
attrs:{
placeholder:"请输入单位"
},
on:{
"on-change":(value)=>{
data.unit = value.target.value
}
}
}),
h("Input",{
style:{
width:'100px',
marginLeft:"20px"
},
attrs:{
placeholder:"备注"
},
on:{
"on-change":(value)=>{
data.remark = value.target.value
data.lastStatus = "1" // 在data里新添加一个字段并赋值。
}
}
})
])
])
}else{
return h("span",data.servitemName)
}
},
五:最后的效果
更多推荐
已为社区贡献5条内容
所有评论(0)