antd table排序 vue_antd of Vue 之table组件踩坑记

需求:页面里有个table,点击编辑可以编辑该table,保存数据并展示到页面上来

第一种方法就是把编辑态的table做成子组件(且叫editeTable),通过v-show判断是否进入编辑态来显示隐藏。先仿造原本父组件(且叫fatherTable),做了一些基本的table样式,子组件editeTable里的tr每格皆为antd-Form表单输入框,接收fatherTable的data数据,用Form的API——validateFields校验并获取输入域的值,进行编辑,用户编辑完后,点保存,然后editeTable里的数据通过$emit函数showPage()传递给fatherTable,覆盖掉fatherTable原本的data数据,这样即可实现。以下为部分代码(不全):1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

v-show="this.editeType"

:editeData="entityinfo"

:editeType="editeType"

@showPage="editeShow">

// 子组件js

export default {

props: {

editeData: Object,

editeType: Boolean

},

mounted() {

this.initDate();

},

watch: {

editeType: function() {

// console.log(this.editeType);

if(this.editeType){

setTimeout(()=>{

this.initDate();

},200)

// this.initDate();

// console.log(111,this.editeData)

}

else {

this.form.setFieldsValue(this.entityinfo);

}

},

methods: {

handleSearch(e) {

e.preventDefault();

this.form.validateFields((error, values) => {

// console.log('error', error);

// console.log('Received values of form: ', values);

// console.log(values);

this.$emit('showPage', values)

});

this.from.validateFields();

}

}

另一种方法是用antd-table自带的编辑edite功能,这个功能可以实现对每一行的数据进行定点编辑,但是遇到一个坑,如果我编辑态也是做成一个子组件的话,就需要先在子组件通过props取到父组件传来的值data,但我们都知道子组件是没有权利更改父组件传过来的值,这时候我们需要定义一个新的变量newdata,通过深拷贝data给newdata赋值,但细看antd文档就知道,antd-table里的数据需要每一条数据都有一个属于自己的key值,然后我们的data并没有key值,此时就需要遍历newdata,给每个对象就push一个key值。然后在newdata上进行操作。1

2

3

4this.newData = [...this.data] || [];

this.newData.forEach((item,index) => {

item.key = index;

}

而且要注意一点就是,antd-table的dataIndex和scopedSlots必须为同名,否则不生效,这是第二个坑,所以newdata在初始化数据要注意。之后编辑获取到新的newdata,便可以通过$emit给父组件传值,得到编辑后的效果。

以下为antd-table的部分实例代码:1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20const columns = [{

title: 'name',

dataIndex: 'name',

width: '25%',

scopedSlots: { customRender: 'name' },

}, {

title: 'operation',

dataIndex: 'operation',

scopedSlots: { customRender: 'operation' },

}]

const data = []

for (let i = 0; i < 100; i++) {

data.push({

key: i.toString(),

name: `Edrward ${i}`,

age: 32,

address: `London Park no. ${i}`,

})

}

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

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

相关文章

计算机管理也无法运行,【两种解决方法】任务管理器打不开怎么办?

任务管理器调不出来怎么办&#xff1f;任务管理器打不开是怎么回事呢&#xff1f;以下两种方法可解决任务管理器打不开问题&#xff1f;1、打开电脑&#xff0c;点击左下角”开始“&#xff0c;选择运行&#xff0c;打开运行对话框后输入"regedit“如下图&#xff1a;2、在…

MySQL唯一约束

MySQL唯一约束&#xff08;Unique Key&#xff09;要求该列唯一&#xff0c;允许为空&#xff0c;但只能出现一个空值。唯一约束可以确保一列或者几列不出现重复值。 在创建表时设置唯一约束 在定义完列之后直接使用 UNIQUE 关键字指定唯一约束&#xff0c;语法规则如下&…

单纯形法表格法例题详解_最优化单纯形法例题讲解.doc

最优化单纯形法例题讲解.doc例1 用单纯形法解下列问题&#xff1a;解&#xff1a;将原问题化成标准形&#xff1a;x4与添加的松弛变量x&#xff0c;x在约束方程组中其系数正好构成一个3阶单位阵&#xff0c;它们可以作为初始基变量&#xff0c;初始基可行解为X(0, 0, , 8, 4)T列…

卫星轨道的计算是利用计算机的,轨道计算

轨道计算是一种粗略测定天体轨道的方法。在轨道计算中﹐人们事先不必对天体轨道作任何初始估计﹐而是从若干观测资料出发﹐根据力学和几何条件定出天体的初始轨道﹐以便及时跟踪天体﹐或作为轨道改进的初值。为了计算六个轨道要素(见二体问题)﹐至少必须有三次光学观测﹐因为每…

MySQL检查约束

MySQL 检查约束&#xff08;CHECK&#xff09;可以通过 CREATE TABLE 或 ALTER TABLE 语句实现&#xff0c;根据用户实际的完整性要求来定义。它可以分别对列或表实施 CHECK 约束。 选取设置检查约束的字段 检查约束使用 CHECK 关键字&#xff0c;具体的语法格式如下&#xf…

计算机虚拟现实技术论文好写吗,虚拟现实技术的论文

虚拟现实技术的论文虚拟现实技术&#xff0c;又称灵境技术&#xff0c;是90年代为科学界和工程界所关注的技术。下面时刻小编给大家搜集的关于虚拟现实技术的科技论文&#xff0c;希望大家喜欢&#xff01;摘要&#xff1a;虚拟现实技术是一种可以创建和体验虚拟世界的计算机技…

sqlserver 微信 读取_Sql Server使用链接服务器远程取数据_sqlserver

由于最近开发的一个查询系统,基本是在其它服务器的,所以在本地服务器设计了中间,用来存从远程服务器取数据!一种方法是通过,OPENDATASOURCE来远程读取数据!SELECT *FROM OPENDATASOURCE(SQLOLEDB,Data SourceServerName;User IDMyUID;PasswordMyPasshttp://www.gaodaima…

MySQL默认约束

“默认值&#xff08;Default&#xff09;”的完整称呼是“默认值约束&#xff08;Default Constraint&#xff09;”。MySQL 默认值约束用来指定某列的默认值。 例如女性同学较多&#xff0c;性别就可以默认为“女”。如果插入一条新的记录时没有为这个字段赋值&#xff0c;那…

设计一个具有大纯时延时间的一阶惯性环节的计算机控制系统,具有一阶纯滞后环节设计.doc...

文档介绍&#xff1a;目录第一部分设计任务及方案1、设计题目及要求2、设计方案分析论证第二部分方案各模块分析1、被控对象分析2、测量元件热电阻及前置放大电路3、A/D转换器4、控制器(单片机)5、光隔驱动器第三部分数字控制器D(Z)的设计1、数字控制器D(Z)2、程序流程图设计第…

MySQL非空约束

MySQL 非空约束&#xff08;NOT NULL&#xff09;可以通过 CREATE TABLE 或 ALTER TABLE 语句实现。在表中某个列的定义后加上关键字 NOT NULL 作为限定词&#xff0c;来约束该列的取值不能为空。 非空约束&#xff08;Not Null Constraint&#xff09;指字段的值不能为空。对…

计算机操作安全协议,安全协议操作语义模型研究及应用-计算机软件与理论专业论文.docx...

安全协议操作语义模型研究及应用-计算机软件与理论专业论文摘摘 要桂林电子科技大学学位论文桂林电子科技大学学位论文摘要安全协议的操作语义模型是一种分析安全协议的新模型&#xff0c;它结合了以往多种协议 分析模型的优点&#xff0c;能分析多个协议及多个主体并行运行的协…

python怎么开发工具_为程序员和新手准备的8大Python开发工具

Python 是一种开源编程语言&#xff0c;用于 Web 编程、数据科学、人工智能和许多科学应用。学习 Python 使程序员能够专注于解决问题&#xff0c;而不是专注于语法&#xff0c;其丰富的库赋予它完成伟大任务所需的力量。1) IDLE安装 Python 时&#xff0c;默认情况下也会安装 …

MySQL查看表中的约束

MySQL 中可以使用 SHOW CREATE TABLE 语句来查看表中的约束。 查看数据表中的约束语法格式如下&#xff1a; SHOW CREATE TABLE <数据表名>;创建数据表 tb_emp8 并指定 id 为主键约束&#xff0c;name 为唯一约束&#xff0c;deptId 为非空约束和外键约束&#xff0c;然…

文件后缀_电脑文件名的后缀即扩展名的显示和隐藏方法

前两天碰到一个同事问我&#xff0c;他的文件名后面的格式不显示了&#xff0c;就是扩展名&#xff0c;比如Word文档名称后缀的doc或者docx和Excel表格名称后缀的xls或者xlsx没有了&#xff0c;还有一些其他文件的后缀也不显示了。我三两下就给他改好了。那么今天就来给大家讲一…

u盘无法格式化不在计算机中,在电脑中,为什么U盘不能格式化?

我们有时候会碰到在电脑中U盘不能格式化的问题&#xff0c;这该怎么办呢&#xff1f;接下来小编就从解决方法来为大家介绍下为什么U盘不能格式化&#xff1f;1. 首先在桌面左下角点击“开始菜单”-->点击“运行..”&#xff0c;然后在运行框中输入&#xff1a;“regedit.exe…

四种依恋类型_依恋关系的研究

说到依恋关系&#xff0c;大家都会想到安全型、焦虑型、回避型&#xff0c;以及这些类型会影响到成年后的人际关系。本文具体罗列一下心理学家研究依恋关系的都做出了怎样的努力。第一&#xff1a;哈罗做的恒河猴验。实验情境&#xff1a;把小猴放在一个笼子里&#xff0c;这个…

MySQL 查询数据表

MySQL 表单查询是指从一张表的数据中查询所需的数据&#xff0c;主要有查询所有字段、查询指定字段、查询指定记录、查询空值、多条件的查询、对查询结果进行排序等。 基本语法 MySQL 从数据表中查询数据的基本语句为 SELECT 语句&#xff0c;基本格式如下&#xff1a; SELE…

内网通看不到其他人_小学生在新版本里用“吃鸡内挂”,巡查员:封不了,手机自带的...

欢迎诸位小伙伴们来到本期天哥开讲的《和平精英》“精英那点事儿”~接下来呢&#xff0c;咱们聊聊玩家用“吃鸡内挂”打沙漠地图、出生岛的ID为何会消失不见以及未更新的新枪提前出现等有趣的玩家游戏经历与发现~得&#xff0c;废话不多说了&#xff0c;还是各位小伙伴们熟悉的…

采用我国国产处理器的超级计算机是,“中国芯”超级电脑合肥诞生 首次采用国产CPU芯片...

首次采用国产CPU芯片&#xff0c;每秒计算一万亿次的“超级”计算机昨天在合肥通过专家鉴定。记者了解到&#xff0c;这台基于龙芯2号的国产万亿次高性能计算机系统KD-50-I&#xff0c;由中国科学技术大学研制成功&#xff0c;使用300多颗64位龙芯2F处理器&#xff0c;峰值性能…

MySQL 过滤重复数据

MySQL SELECT 语句查询数据的时候返回的是所有匹配的行。 查询 tb_students_info 表中所有 age 的执行结果如下所示。 mysql> SELECT age FROM tb_students_info; ------ | age | ------ | 25 | | 23 | | 23 | | 22 | | 24 | | 21 | | 22 | | 23 | | 2…