爆改vue3 setup naiveui可编辑table

使用naiveui官网的可编辑table总是报错,所以手写了一个

思路:table数据数组unitMsgArr对应一个布尔的数组isEditArr ,点击table可编辑的行数据的时候,更改对应的isEdit为true,此时渲染组件EditCom,在EditCom组件中编辑完成,触发父组件的方法更改数据,完成编辑

table页面代码,重点在columns的配置

<n-data-table :columns="columns":data="unitMsgArr":bordered="true"style="height:520px" /><script>//获取点击的行在数据数组unitMsgArr对应的index
const getDataIndex = (id: string) => {return unitMsgArr.value.findIndex((item) => item.id === id)
}//拿到前页面的unitMsgArr时,生成对应的是否边际数组 isEditArr   
const isEditArr = ()=>{unitMsgArr.value.forEach(()=>{//默认都不可以编辑return false})
}setup(){const createColumns = () => {return [{title: '姓名',key: 'name',width: 400},{title: '年龄',key: 'age',width: 400},{//可编辑列title: '编号',key: 'num',width: 300,render(row: unitType) {if (isEditArr.value[getDataIndex(row.id)] === false) {return h(NButton,{text: true,onClick: () => {isEditArr.value[getDataIndex(row.id)] =!isEditArr.value[getDataIndex(row.id)]}},{default: () => row.num})} else {return h(EditCom, {rowData: row,onLoseFouce: (data: any) => {changeNumFun(data)}})}}}}]}}
</script>

自己创建一个组件EditCom,在table可编辑的列中使用

EditCom代码

<template><div class="editBox"><n-space><n-input class="inputBox"placeholder="输入编号"v-model:value="inputNum"></n-input><n-button @click="submitNum">确定</n-button></n-space></div>
</template>
<script lang="ts">
import { ref, h,defineComponent } from 'vue'// LoseFouce 父组件方法export default defineComponent({name: 'editCom',props: {rowData: {type: Object,default: 0}},setup(props, context) {console.log(props.rowData.num)// 输入的数字const inputNum = ref(props.rowData.num)// 输入数字触发方法const changeNum = () => {console.log(inputNum.value)}// 点击确定触发方法const submitNum = () => {console.log('确定更改')context.emit('loseFouce', {indexNum: inputNum.value,id: props.rowData.id})// 将输入的数字传递到父组件}return {inputNum, //输入的数字changeNum, //改变数字submitNum //确定按钮}}
})
</script>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/19490.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

flask---》登录认证装饰器/配置文件/路由系统

登录认证装饰器 # 0 装饰器的本质原理-# 类装饰器&#xff1a;1 装饰类的装饰器 2 类作为装饰器 # 1 装饰器使用位置&#xff0c;顺序 # 3 flask路由下加装饰器&#xff0c;一定要加endpoint-如果不指定endpoint&#xff0c;反向解析的名字都是函数名&#xff0c;不加装饰器…

【数据可视化】(一)数据可视化概述

目录 0.本章节概述 一、数据可视化 1、什么是数据可视化? 2、数据可视化的好处 3、数据可视化的用途 二、数据探索 1、数据相关工具的使用情景: 2、探索性查询 三、数据挑战 1、什么是数据挑战?

24考研数据结构-数组和特殊矩阵

目录 数据结构&#xff1a;数组与特殊矩阵数组数组的特点数组的用途 特殊矩阵对角矩阵上三角矩阵和下三角矩阵稀疏矩阵特殊矩阵的用途 结论 3.4 数组和特殊矩阵3.4.1数组的存储结构3.4.2普通矩阵的存储3.4.3特殊矩阵的存储1. 对称矩阵(方阵)2. 三角矩阵(方阵)3. 三对角矩阵(方阵…

图像处理之hough圆形检测

hough检测原理 点击图像处理之Hough变换检测直线查看 下面直接描述检测圆形的方法 基于Hough变换的圆形检测方法 对于一个半径为 r r r&#xff0c;圆心为 &#xff08; a , b &#xff09; &#xff08;a,b&#xff09; &#xff08;a,b&#xff09;的圆&#xff0c;我们将…

vscode里安装Go插件和配置Go环境

vscode是一款跨平台、轻量级、插件多的开源IDE&#xff0c;在vscode不仅可以配置C/C、Python、R、Ruby等语言的环境&#xff0c;还可以配置Go语言的环境。这里介绍在vscode里安装Go语言的插件和配置Go语言环境&#xff0c;系统是Win10 64位。 1、下载Go安装包和配置GOROOT、GO…

283. 移动零

移动零 题目 给定一个数组 nums&#xff0c;编写一个函数将所有 0 移动到数组的末尾&#xff0c;同时保持非零元素的相对顺序。 请注意 &#xff0c;必须在不复制数组的情况下原地对数组进行操作。 答案1 class Solution { public:void moveZeroes(vector<int>& nums…

深度思考java基础面经

基础 1 重载和重写的区别 1.1 区别 重载和重写是两个编程术语&#xff0c;主要用在面向对象的编程语言中。以下是重载和重写的主要区别&#xff1a; 方法重载&#xff08;Overloading&#xff09;&#xff1a;发生在同一个类中&#xff0c;方法重载是指一个类中定义了多个同…

内部类和类的初始化实例化过程

一、内部类 1. 什么是内部类 在类的内部定义一个类&#xff0c;专门服务于外部类&#xff0c;便于访问外部类的属性和方法。 2. 内部类的分类 成员内部类&#xff1a;定义在类的成员变量的位置 静态内部类&#xff1a;使用起来跟普通的外部类基本一致&#xff1b;非静态内部…

一年级数学 数一数(一到十)

今天我们来学习数一数 有一些老人 眼睛可能花了 需要我们在动物园数清楚是多少个动物 然后告诉他们 可能有的小朋友 不知道某些数字怎么读 您可以打开地址 https://fanyi.baidu.com/?aldtype16047#zh/en/ 将数字 输入到 输入框内 然后点击 下面的小话筒 系统就会读出来了 小…

音视频知识:MPEG-4、H264、MP4、AAC之间的关系

MPEG-4 一种编码标准。是国际标准化组织 (ISO) 主要针对消费类应用&#xff0c;已经针对运动图像压缩定义的标准。MPEG&#xff08;Moving Picture Experts Group&#xff09;标准包括 MPEG1、MPEG2与 MPEG4。 MPEG-4标准目前分为27个部分&#xff0c;统称为ISO/IEC14496国际标…

高忆管理:多重利好共振 外资加码布局A股

资本商场活泼信号正在继续开释&#xff0c;内外资决心取得有力提振。以北向资金为代表的外资近来表现活泼&#xff0c;近六个买卖日已连续净买入超500亿元。多家外资组织近期表态称&#xff0c;伴跟着方针力度加强&#xff0c;我国经济有望继续复苏&#xff0c;活泼看好我国权益…

2023年8月美团外卖3-18元红包优惠券天天领取活动日历及美团外卖红包领取使用

2023年8月美团外卖3-18元红包天天领取活动日历 根据上图美团外卖红包领取活动时间表以下时间可以天天领取3-18元美团外卖红包优惠券&#xff1a; 1、2023年8月18日 可领取美团外卖18元神券节红包&#xff1b; 2、2023年8月每周六、周日每天可领取12元美团外卖节红包&#xff…

【C++】类和对象-继承

0.前言 1.基本语法 继承的用处就是极大的减少代码的重复性&#xff0c;如果没有用继承&#xff0c;看看以下代码&#xff0c;你知道了。。。。 基本实现代码&#xff1a; #include <iostream> using namespace std; /******************************************/void …

万界星空/推出生产制造执行MES系统/开源MES/免费下载

免费MES系统介绍 什么是MES系统呢&#xff1f;MES系统主要功能就是解决“如何生产”的问题。通过实施MES系统&#xff0c;一站式解决您所困扰的所有生产制作流程问题。 普通的免费MES系统只提供简单的基本功能让客户体验&#xff0c;而万界星空MES系统运用低代码的形式开发&a…

【二开】JeecgBoot-vue3二次开发 前端 扩展online表单js增强等-初始化列表之后执行

【二开】JeecgBoot-vue3二次开发 前端 扩展online表单js增强等-初始化列表之后执行 二开位置 OnlineAutoList.js.initAutoList 定义方法 /*** 初始化列表之后执行* js增强* param tableColumns* returns {Promise<void>|*}*/onlineTableContext["afterInitAutoList…

Codeforces Round 855 (Div. 3) E题题解

文章目录 [ Unforgivable Curse (hard version)](https://codeforces.com/contest/1800/problem/E2)问题建模问题分析方法1分析性质1.分析操作对元素位置的影响2.分析可以使用操作的元素可以与相邻元素交换位置的作用代码 方法2通过DFS得到相互可以交换位置的字符集合代码 方法…

Spring Boot的自动配置原理

一.原理解释 Spring Boot的自动配置是Spring框架的一个重要特性&#xff0c;它旨在简化应用程序的开发和部署过程。自动配置通过基于类路径中的依赖关系和配置文件内容来预先配置Spring应用程序的各种组件和功能。这样&#xff0c;我们可以在无需显式配置大量参数的情况下&…

干翻Dubbo系列第六篇:SpringBoot与Dubbo整合

文章说明 本文内容整理自《孙哥说Dubbo系列视频课程》&#xff0c;孙帅老师课程细致、全面、深入、性价比极高。B站搜孙帅suns可以找到对应的试听视频&#xff0c;或者直接添加老师微信号suns45与他直接联系 一&#xff1a;SpringBoot应用Dubbo开发应用的核心思路分析 深度封…

消息中间件应用场景介绍

提高系统性能首先考虑的是数据库的优化&#xff0c;但是数据库因为历史原因&#xff0c;横向扩展是一件非常复杂的工程&#xff0c;所有我们一般会尽量把流量都挡在数据库之前。 不管是无限的横向扩展服务器&#xff0c;还是纵向阻隔到达数据库的流量&#xff0c;都是这个思路。…

更安全,更省心丨DolphinDB 数据库权限管理系统使用指南

在数据库产品使用过程中&#xff0c;为保证数据不被窃取、不遭破坏&#xff0c;我们需要通过用户权限来限制用户对数据库、数据表、视图等功能的操作范围&#xff0c;以保证数据库安全性。为此&#xff0c;DolphinDB 提供了具备以下主要功能的权限管理系统&#xff1a; 提供用户…