当前位置: 首页 > 工具软件 > custom select > 使用案例 >

antdv表格(a-table)中的customRender函数return输出dom元素的写法

宋晋
2023-12-01

这里的代码其实是参考着jsx的写法,如果这里涉及到其他的vue2的高级语法糖(比如v-model等),可以尝试搜索jsx中的v-model的写法
customRender函数来源参考:
antdv合并表格行或列

              customRender: function (text, record, index) {
                  return <helloword
                        refName={v.code}
                        ref={v.code}
                        name={name}//原版为:name="name"
                    	onSelect={handlerSelect}//原版为@select="handlerSelect"
                    >{text}</helloword>
                }
                
              },
  • ref的写法:ref={v.code},好像不能用,也可以使用refName={v.code},然后在helloword中调用
  • 普通绑定的属性的写法: name={name},替代原版:name=“name”
  • 函数的写法:onSelect={that.handlerSelect},替代原版的@select=“handlerSelect”,此处有this的指向问题,需要在外面用let that = this解决指向问题,
  • 普通插值的写法:<div>{text}</div>,替代原版的<div>{{text}}</div>
  • return后面的写法:
return (
	<div>{text}</div>//这种是可以的,换行时候使用括号
)
return <div>{text}</div>//这种不换行的,div和return在一行的可以不用括号
 类似资料: