问题:naive UI 在表格中使用n-swith时无法触发事件发生


一、问题描述

在数据表格中嵌入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("关闭")
  }
}

效果如下

 


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM