Render函数可以用到的属性

本文深入探讨了Vue.js中组件的属性使用,包括class、style、attrs、props、domProps等,解析了事件监听器、自定义指令、scoped slots及特殊属性的运用,帮助开发者更好地掌握Vue组件的高级特性。

{
// 和v-bind:class一样的 API
‘class’: {
foo: true,
bar: false
},
// 和v-bind:style一样的 API
style: {
color: ‘red’,
fontSize: ‘14px’
},
// 正常的 HTML 特性
attrs: {
id: ‘foo’
},
// 组件 props
props: {
myProp: ‘bar’
},
// DOM 属性
domProps: {
innerHTML: ‘baz’
},
// 事件监听器基于 on
// 所以不再支持如 v-on:keyup.enter 修饰器
// 需要手动匹配 keyCode。
on: {
click: this.clickHandler
},
// 仅对于组件,用于监听原生事件,而不是组件内部使用 vm.$emit 触发的事件。
nativeOn: {
click: this.nativeClickHandler
},
// 自定义指令。注意事项:不能对绑定的旧值设值
// Vue 会为您持续追踪
directives: [
{
name: ‘my-custom-directive’,
value: ‘2’,
expression: ‘1 + 1’,
arg: ‘foo’,
modifiers: {
bar: true
}
}
],
// Scoped slots in the form of
// { name: props => VNode | Array }
scopedSlots: {
default: props => createElement(‘span’, props.text)
},
// 如果组件是其他组件的子组件,需为插槽指定名称
slot: ‘name-of-slot’,
// 其他特殊顶层属性
key: ‘myKey’,
ref: ‘myRef’
}

借鉴于: https://www.cnblogs.com/tugenhua0707/p/7528621.html

在 Ant Design Vue 中,`customRender` 属性用于自定义表格列的内容展示方式。它允许开发者通过编写自定义的渲染函数来控制每一行、每个单元格的具体内容。下面详细介绍 `customRender` 函数可以接受哪些参数以及它们的作用: ### customRender 参数详解 #### 1. text (String | Number) 该值对应当前列所绑定的数据项中的具体内容,默认就是数据模型里的原始文本。对于简单的数据显示来说,直接返回此值即可满足需求。 **例子**: 直接展示用户姓名。 ```javascript { title: '用户名', dataIndex: 'username', customRender: (text) => text // 或者简写成 text => text } ``` #### 2. record (Object) 代表整条记录的对象实例,即一行的所有字段组成的对象。当你需要基于其他字段信息来进行更复杂的条件判断或者组合显示的时候非常有用。 **例子**: 根据用户的性别显示不同的图标。 ```javascript { title: '性别', dataIndex: 'gender', customRender: ({ gender }) => gender === 'male' ? <MaleIcon /> : <FemaleIcon /> } ``` > 注意这里我们用了 JSX 语法糖,在实际项目里你需要确保 Babel 配置支持转换这种写法。 #### 3. index (Number) 表示这一行在整个数据集合中的索引位置(从0开始计数)。这对于添加行号之类的场景特别方便。 **例子**: 显示每一条记录对应的行编号。 ```javascript { title: '序号', customRender: (_, __, index) => `${index + 1}` // 因为是从零开始所以加一 } ``` 此外,`customRender` 还有一个隐藏特性是可以接收第四个参数——`column` 自身的信息(通常不太常用到),但在某些特殊情况下也可能需要用到这个额外的信息来源做进一步处理。 ### 使用注意事项 - **性能优化**:如果业务逻辑较为复杂建议尽量减少不必要的计算开销;同时注意组件懒加载和按需引入原则以提高整体效率。 - **响应式设计**:考虑到移动设备和平板电脑的不同屏幕尺寸,合理调整样式布局让表格能够适应更多平台的需求。 以上就是在 Ant Design Vue 表格组件中使用 `customRender` 时涉及到的主要属性及其应用场景了!
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值