vue中render函数使用-js开发中需要用render来创建HTML
最近开发vue过程中,在js处理过程中需要显示页面,并且需要渲染多个页面的组件,这时候得用render函数
{
title: "标签",
width: 400,
render: (h, params) => {
let tag = params.row.tag_content_list;
let id = params.row.id;
let input_tag ;
return h("div", [
tag.map(function (items,index){
return h("h-tag", {props: {color: "yellow",closable:"true"},
on:{
'on-close':(event)=>{
// console.info("123"+items.id);
this.delTag(items.id);
}
}
},items.tag_content)
}),
h("Button", {props: {icon:"ios-plus-empty",type:"dashed",size:"small"},
on:{click:()=>{
// console.info(column_id)
this.$hMsgBox.confirm({
title: '标签管理',
render: (h) => {
return h('Input', {
props: {
autofocus: true,
placeholder: '请输入标签内容...'
},
on: {
input: (val) => {
input_tag = val;
}
},
})
},
onOk: () => {
//新增标签接口调用
// this.$hMessage.info('点击了确定'+id+input_tag);
this.addTag(id,input_tag);
},
});
}
}}, "添加标签")
]);
}
}
render
函数传入两个参数,第一个是 h,第二个是对象,包含 row
、column
和 index
,分别指当前单元格数据,当前列数据(columns内列数据),当前是第几行。
用法:
render: (h, params) => {
return h("div", [
tag.map(function (items,index){
map函数可以作为获取的多个对象之后来循环使用,循环创建多个tag
其中
return h("h-tag", {props: {color: "yellow",closable:"true"},
使用中有以下几个参数
props 属性设置
on 事件设置,以下是tag标签的关闭事件
on:{
'on-close':(event)=>{
// console.info("123"+items.id);
this.delTag(items.id);
}
还有其他配置
'class':{
show:true,
hide:false,
},
style:{
width:'200px',
height:'400px',
background:'red',
},
attrs:{
name:'h-ex',
id:'h-id'
},
作者:少帅
出处:少帅的博客--http://www.cnblogs.com/wang3680
您的支持是对博主最大的鼓励,感谢您的认真阅读。
本文版权归作者所有,欢迎转载,但请保留该声明。
![](https://images.cnblogs.com/cnblogs_com/wang3680/1880988/o_201113031241%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20201113111211.jpg)
![](https://images.cnblogs.com/cnblogs_com/wang3680/1881010/o_201113034037%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20201113113928.png)
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 趁着过年的时候手搓了一个低代码框架
· 本地部署DeepSeek后,没有好看的交互界面怎么行!
· 为什么说在企业级应用开发中,后端往往是效率杀手?
· 用 C# 插值字符串处理器写一个 sscanf
· 乌龟冬眠箱湿度监控系统和AI辅助建议功能的实现