一、问题描述
在数据表格中嵌入switch时,写入的switch事件没有效果
二、产生原因
关于table的列表项都是进行过拆分的,单独在ts文件写的数据,此时我们利用的是render函数来创造元素,所以就会出现写法上的偏差
三、解决方案
Naive的官方文档是提到了的,关于事件在jsx的写法如下 @update:value="handleChange"
在Naive UI的官方文档中的@update:xxx,我们利用jsx写法则可以写成onUpdateValue
在文档中有‘-’连着的属性名皆可以利用大写来转换!例:default-value在render函数可以写成defaultValue
//表格数据 { title: "操作", fixed: "right", render(row) { return h(NSwitch, { defaultValue: value, // 监测switch的改变 onUpdateValue: handleChange, }) }, }, const handleChange = (val) => { if (val) { message.success("打开") } else { message.success("关闭") } }
效果如下