ant design table左侧_ant-design-vue中table组件的使用问题_红茶漫山的博客-程序员宅基地
技术标签： ant design table左侧
问题描述
这两天在学习vue框架，并使用ant-design的table组件来显示用户信息，后端用springboot框架，当使用axios来进行数据交互时，无法获取到table中的参数key，具体信息如下：
页面：
点击删除标签后报错信息：
相关代码
用户管理
v-if="dataSource.length"
title="你确定要删除？"
@confirm="() => onDelete(record.key)">
删除
import axios from 'axios'
import qs from 'qs'
import EditableCell from './EditableCell'
export default {
name: 'UserManagement',
components: {
EditableCell
},
data() {
return {
dataSource: [],
columns: [{
title: 'id',
dataIndex: 'id',
},{
title: '姓名',
dataIndex: 'name',
width: '20%',
scopedSlots: { customRender: 'name' },
}, {
title: '性别',
dataIndex: 'sex',
},{
title: '密码',
dataIndex: 'password',
},{
title: '邮箱',
dataIndex: 'email',
},{
title: '地址',
dataIndex: 'address',
},{
title: '操作',
dataIndex: 'operation',
scopedSlots: { customRender: 'operation' },
}]
}
},
mounted: function (){
this.allUser();
},
methods: {
allUser(){
axios.get('http://localhost:8090/demo/all')
.then((res)=>{
this.dataSource = res.data
})
.catch((error)=>{
alert(error)
});
},
onCellChange (key, dataIndex, value) {
const dataSource = [...this.dataSource]
const target = dataSource.find(item => item.key === key)
if (target) {
target[dataIndex] = value
this.dataSource = dataSource
}
},
onDelete (key) {
alert(key)
axios.get('http://localhost:8090/demo/deleteById?id='+key)
.then((res)=>{
alert(res.data)
})
.catch((error)=>{
alert(error)
});
const dataSource = [...this.dataSource]
this.dataSource = dataSource.filter(item => item.key !== key)
},
}
}
controller层：
@GetMapping(path="/deleteById")
public @ResponseBody String deleteById(@RequestParam Integer id){
System.out.println(id);
userRepository.deleteById(id);
return "Delete success!";
}
好像是dataSource中必须要有key，比如说这样的数据：
dataSource: [{
key: '0',
name: 'Edward King 0',
age: '32',
address: 'London, Park Lane no. 0',
}, {
key: '1',
name: 'Edward King 1',
age: '32',
address: 'London, Park Lane no. 1',
}]
但是我后端返回的数据中没有key这个属性，而是id。之前尝试把数据库中的主键id的字段名换成key，但是key又是MySQL中的关键字，用不了。
求大神们指教，这个key的问题要怎么处理？或者有没有其他处理办法？
智能推荐
对于PHPCMSV9 phpsso通信失败解决方法_Young-杨的博客-程序员宅基地
一、对于PHPCMSV9 phpsso通信失败一大原因是对于api.php?op=phpsso接口的频繁访问（如大量新注册用户），因为是主机层面的，所以会被安全狗判定为CC攻击，从而将服务器IP加入黑名单，这样会导致单点登录SSO的通信失败，整个会员系统瘫痪，不知道这个逻辑算不算是安全狗的Bug！！！二、1、检查站点根目录\caches\configs目录下的syste
解决ubuntu18.04 conda activate报错问题_qq_26646565的博客-程序员宅基地
解决ubuntu18.04系统 conda activate 报错问题每次通过命令 conda activate envs_name 激活conda环境时,都会报如下错误:CommandNotFoundError: Your shell has not been properly configured to use 'conda activate'.If your shell is Bash or a Bourne variant, enable conda for the current user
2022最新前端vue面试题_vue移动端面试题_峰峰吃芒果的博客-程序员宅基地
一.自我介绍(我是谁 来自哪里,今天来的目的,面试的岗位是什么,几年的工作经验,掌握的技术栈有哪些,开发过什么项目,项目中负责的板块是什么)面试官您好!我叫XXX,来自XXX,很荣幸能来我们公司面试,我从事前端开发有3年了,目前掌握的技术有html,css,js,ajax,vue,小程序,参与过各种类型的项目。我做过的项目有 A,B,C,D,E 那么最近做的一个项目是XXX 在这个项目中我主要负责的板块是XXX 面试官 您这边还有什么想要了解的么。二.项目功能提问vue后台项目(这几个功能点要求_vue移动端面试题
oracle 优化_yxc369的博客-程序员宅基地
转：ray‘s1 前言 22 总纲 23 降龙十八掌 3第一掌 避免对列的操作 3第二掌 避免不必要的类型转换 4第三掌 增加查询的范围限制 4第四掌 尽量去掉”IN”、”OR” 4第五掌 尽量去掉 “第六掌 去掉Where子句中的IS NULL和IS NOT NULL 5第七掌 索引提高数据分布不均匀时查询效率 5第八掌 利用HINT强制指定索引 6第九掌 屏蔽无用索引 6第十掌 分解复杂
知乎趣闻_天为我蓝的博客-程序员宅基地
"一个优秀的程序员，在接到一个要编写“毁灭地球”的任务的时候，他不会简单的写一个destroyEarth()的方法；而是会写一个destroyPlanet()的方法，将earth作为一个参数传进去。"转载于:https://www.cnblogs.com/DavidWan/p/5814477.html...
StringIO和BytesIO的读写_weixin_30613343的博客-程序员宅基地
StringIO和BytesIO的读写 StringIO顾名思义,就是在内存中读写str要把str写入StringIO,需要先创建一个StringIO, 然后像文件一样写入:# 写StringIOfrom io import StringIOf = StringIO()print(f.write('hello'))print(f...._bytesio write
随便推点
非阻塞accept_java 非阻塞accept_ixidof的博客-程序员宅基地
非阻塞accept_java 非阻塞accept
hive使用mysql localstore方式连接Access denied for user 'hive'@'localhost' to database_tuohuangs的博客-程序员宅基地
mysql> create user 'hive' identified by 'hive'; --创建用户Query OK, 0 rows affected (0.00 sec)mysql> grant all privileges on *.* to 'hive@localhost' with grant option; --localhost不可少，否则启动bin
ClickHouse客户端访问（CLI、JDBC）_clickhouse jdbc 端口_年年有风.的博客-程序员宅基地
ClickHouse的底层访问接口支持TCP和HTTP两种协议。其中HTTP的端口为 8123，它拥有更好的兼容性。TCP协议则拥有更好的性能，默认端口为9000。 一般都是通过CLI和JDBC这两些封装接口去访问，因为它们更加简单和方便。1、CliCLI（Command line Interface）即命令行接口。它的底层是基于TCP协议的。相信用过数据库的人都很熟悉这类方式。它分为两种，一种为交互式执行，一种则为非交互式执行。交互式执行是登录客户端，然后使用SQL进行有来有回，..._clickhouse jdbc 端口
Docker优雅的关闭SpringBoot - 第310篇_悟纤的博客-程序员宅基地
相关历史文章（阅读本文之前，您可能需要先看下之前的系列????）国内最全的SpringBoot系列之三布隆过滤器BloomFilter竟然让我解决了一个大厂的问题-第305篇100G的文件如何读取-第306篇100G的文件如何读取续集-第307篇Java语言的优雅停机-第308篇SpringBoot 优雅停止服务的几种方法 - 第309篇师傅：今天原本是要徒儿讲解下《字节码插桩》的，但是我们还是先回答下粉丝的问题“在Docker 或 kubernete...
linux 网桥代码分析之网桥转发数据库的代码分析Ⅳ_ether_addr_equal_老王不让用的博客-程序员宅基地
1 数据库初始化br_fdb_init()该函数调用kmem_cache_create 来创建一个新缓存(这个函数并没有向缓存分配任何内存)int __init br_fdb_init(void){ br_fdb_cache = kmem_cache_create("bridge_fdb_cache", sizeof(struct net_bridge_fdb_entry), 0, SLAB_HWCACHE_ALIGN, NULL); if (!br..._ether_addr_equal
计算轨迹相似度代码_谢符宝的博客-程序员宅基地
// test1.cpp : Defines the entry point for the console application.//#include "stdafx.h"#include #include #include #include #include #include #include #include #include #include #include