iview中render函数监听事件

最新推荐文章于 2024-12-17 13:04:56 发布

weixin_30597269

最新推荐文章于 2024-12-17 13:04:56 发布

阅读量826

点赞数

原文链接：http://www.cnblogs.com/yun1108/p/9505312.html

版权

本文介绍如何在 iView 的 Table 组件中添加 Datepicker 功能，并展示了如何通过监听子组件的自定义事件来实现数据更新。具体包括设置 Datepicker 的属性如类型、格式等，并演示了如何绑定事件处理器。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

 1 iview的table中添加datepicker
 2 在组件中嵌套组件，如果需要监听子组件的自定义事件，
 3 应该使用render中的on:{
 4 　　'on-change' () => {
 5 　　　　console.log('这里会触发子组件的事件')
 6 　　}
 7 }
 8 
 9 代码片段
10 
11 {
12  　　title: '发布时间',
13  　　key: 'pubdate',
14  　　sortable: true,
15  　　width: 280,
16  　　render: (h, params) => {
17  　　　　return h('div', [
18   　　　　　　h('DatePicker', {
19   　　　　　　　　props: {
20   　　　　　　　　　　type: 'datetime',
21 　　　　　　　　　　  format: 'yyyy-MM-dd HH:mm',
22 　　　　　　　　　　  placeholder: '选择日期和时间',
23 　　　　　　　　　　  value: params.row.pubdate
24 　　　　　　　　},
25 　　　　　　　　style: {
26 　　　　　　　　　　marginRight: '5px'
27 　　　　　　　　},
28 　　　　　　　　on: {
29 　　　　　　　　　　'on-change': (val) => {
30 　　　　　　　　　　　　console.log('发布时间1')
31 　　　　　　　　　　}
32 　　　　　　　　}
33 　　　　　　})
34 　　　　])
35 　　}
36 }