zdppy+vue3+antd 实现表格单元格编辑功能

初步实现

<template><a-button class="editable-add-btn" style="margin-bottom: 8px" @click="handleAdd">Add</a-button><a-table bordered :data-source="dataSource" :columns="columns"><template #bodyCell="{ column, text, record }"><!--make the name column editable--><template v-if="column.dataIndex === 'name'"><div class="editable-cell"><div v-if="editableData[record.key]" class="editable-cell-input-wrapper"><a-input v-model:value="editableData[record.key].name" @pressEnter="save(record.key)"/><check-outlined class="editable-cell-icon-check" @click="save(record.key)"/></div><div v-else class="editable-cell-text-wrapper">{{ text || ' ' }}<edit-outlined class="editable-cell-icon" @click="edit(record.key)"/></div></div></template><!--Action column--><template v-else-if="column.dataIndex === 'operation'"><a-popconfirmv-if="dataSource.length"title="Sure to delete?"@confirm="onDelete(record.key)"><a>Delete</a></a-popconfirm></template></template></a-table>
</template>
<script setup>
import {computed, reactive, ref} from 'vue';
import {CheckOutlined, EditOutlined} from "@ant-design/icons-vue";
import {cloneDeep} from 'lodash-es';const columns = [{title: 'name',dataIndex: 'name',width: '30%',},{title: 'age',dataIndex: 'age',},{title: 'address',dataIndex: 'address',},{title: 'operation',dataIndex: 'operation',},
];
const dataSource = ref([{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',},
]);
const count = computed(() => dataSource.value.length + 1);
const editableData = reactive({});// make the row editable
const edit = key => {editableData[key] = cloneDeep(dataSource.value.filter(item => key === item.key)[0]);
};// save the edit result
const save = key => {Object.assign(dataSource.value.filter(item => key === item.key)[0], editableData[key]);delete editableData[key];
};// delete the row
const onDelete = key => {dataSource.value = dataSource.value.filter(item => item.key !== key);
};// add a row to data source
const handleAdd = () => {const newData = {key: `${count.value}`,name: `Edward King ${count.value}`,age: 32,address: `London, Park Lane no. ${count.value}`,};dataSource.value.push(newData);
};
</script>
<style lang="less" scoped>
.editable-cell {position: relative;.editable-cell-input-wrapper,.editable-cell-text-wrapper {padding-right: 24px;}.editable-cell-text-wrapper {padding: 5px 24px 5px 5px;}.editable-cell-icon,.editable-cell-icon-check {position: absolute;right: 0;width: 20px;cursor: pointer;}.editable-cell-icon {margin-top: 4px;display: none;}.editable-cell-icon-check {line-height: 28px;}.editable-cell-icon:hover,.editable-cell-icon-check:hover {color: #108ee9;}.editable-add-btn {margin-bottom: 8px;}
}.editable-cell:hover .editable-cell-icon {display: inline-block;
}
</style>

渲染后端接口数据

<script setup>
import {computed, onMounted, reactive, ref} from 'vue';
import {CheckOutlined, EditOutlined} from "@ant-design/icons-vue";
import {cloneDeep} from 'lodash-es';
import axios from "axios";const columns = [{name: '姓名',dataIndex: 'name',key: 'name',},{name: '性别',dataIndex: 'gender',key: 'gender',},{title: '年龄',dataIndex: 'age',key: 'age',},{title: '电话',dataIndex: 'phone',key: 'phone',},{title: '邮箱',key: 'email',dataIndex: 'email',},{title: '薪资',key: 'salary',dataIndex: 'salary',},{title: '操作',key: 'action',},
];const dataSource = ref([]);onMounted(() => {axios.get("http://127.0.0.1:8889/zdppy_amuserdetail").then((response) => {console.log("response.data", response.data);dataSource.value = response.data.data.results;})
})const count = computed(() => dataSource.value.length + 1);
const editableData = reactive({});// make the row editable
const edit = id => {console.log("edit", editableData, id)editableData[id] = cloneDeep(dataSource.value.filter(item => id === item.id)[0]);
};// save the edit result
const save = id => {Object.assign(dataSource.value.filter(item => id === item.id)[0], editableData[id]);delete editableData[id];
};// add a row to data source
const handleAdd = () => {const newData = {key: `${count.value}`,name: `Edward King ${count.value}`,age: 32,address: `London, Park Lane no. ${count.value}`,};dataSource.value.push(newData);
};
</script><template><a-button class="editable-add-btn" style="margin-bottom: 8px" @click="handleAdd">Add</a-button><a-tablebordered:data-source="dataSource":columns="columns":row-key="record => record.id"><template #headerCell="{ column }"><template v-if="column.key === 'name'"><span>{{ column.name }}</span></template><template v-else-if="column.key === 'gender'"><span>{{ column.name }}</span></template></template><template #bodyCell="{ column, text, record }"><!--make the name column editable--><template v-if="column.dataIndex === 'name'"><div class="editable-cell"><div v-if="editableData[record.id]" class="editable-cell-input-wrapper"><a-input v-model:value="editableData[record.id].name" @pressEnter="save(record.id)"/><check-outlined class="editable-cell-icon-check" @click="save(record.id)"/></div><div v-else class="editable-cell-text-wrapper">{{ text || ' ' }}<edit-outlined class="editable-cell-icon" @click="edit(record.id)"/></div></div></template><!--Action column--><template v-else-if="column.key === 'action'"><a-space wrap><a-button size="small" type="primary" block>编辑</a-button><a-button size="small" block>详情</a-button><a-button size="small" danger block>删除</a-button></a-space></template></template></a-table>
</template>
<style lang="less" scoped>
.editable-cell {position: relative;.editable-cell-input-wrapper,.editable-cell-text-wrapper {padding-right: 24px;}.editable-cell-text-wrapper {padding: 5px 24px 5px 5px;}.editable-cell-icon,.editable-cell-icon-check {position: absolute;right: 0;width: 20px;cursor: pointer;}.editable-cell-icon {margin-top: 4px;display: none;}.editable-cell-icon-check {line-height: 28px;}.editable-cell-icon:hover,.editable-cell-icon-check:hover {color: #108ee9;}.editable-add-btn {margin-bottom: 8px;}
}.editable-cell:hover .editable-cell-icon {display: inline-block;
}
</style>

将修改的数据保存到数据库

<script setup>
import {computed, onMounted, reactive, ref} from 'vue';
import {CheckOutlined, EditOutlined} from "@ant-design/icons-vue";
import {cloneDeep} from 'lodash-es';
import axios from "axios";const columns = [{name: '姓名',dataIndex: 'name',key: 'name',},{name: '性别',dataIndex: 'gender',key: 'gender',},{title: '年龄',dataIndex: 'age',key: 'age',},{title: '电话',dataIndex: 'phone',key: 'phone',},{title: '邮箱',key: 'email',dataIndex: 'email',},{title: '薪资',key: 'salary',dataIndex: 'salary',},{title: '操作',key: 'action',},
];const dataSource = ref([]);onMounted(() => {axios.get("http://127.0.0.1:8889/zdppy_amuserdetail").then((response) => {console.log("response.data", response.data);dataSource.value = response.data.data.results;})
})const count = computed(() => dataSource.value.length + 1);
const editableData = reactive({});// make the row editable
const edit = id => {console.log("edit", editableData, id)editableData[id] = cloneDeep(dataSource.value.filter(item => id === item.id)[0]);
};// save the edit result
const save = id => {const data = editableData[id]console.log("updated data", data)// backend updateaxios({method: "put",url: "http://127.0.0.1:8889/zdppy_amuserdetail/" + id,contentType: "application/json",data,}).then(resp => {console.log("update", resp.data);})// frontedn updateObject.assign(dataSource.value.filter(item => id === item.id)[0], editableData[id]);delete editableData[id];
};// add a row to data source
const handleAdd = () => {const newData = {key: `${count.value}`,name: `Edward King ${count.value}`,age: 32,address: `London, Park Lane no. ${count.value}`,};dataSource.value.push(newData);
};
</script><template><a-button class="editable-add-btn" style="margin-bottom: 8px" @click="handleAdd">Add</a-button><a-tablebordered:data-source="dataSource":columns="columns":row-key="record => record.id"><template #headerCell="{ column }"><template v-if="column.key === 'name'"><span>{{ column.name }}</span></template><template v-else-if="column.key === 'gender'"><span>{{ column.name }}</span></template></template><template #bodyCell="{ column, text, record }"><!--make the name column editable--><template v-if="column.dataIndex === 'name'"><div class="editable-cell"><div v-if="editableData[record.id]" class="editable-cell-input-wrapper"><a-input v-model:value="editableData[record.id].name" @pressEnter="save(record.id)"/><check-outlined class="editable-cell-icon-check" @click="save(record.id)"/></div><div v-else class="editable-cell-text-wrapper">{{ text || ' ' }}<edit-outlined class="editable-cell-icon" @click="edit(record.id)"/></div></div></template><!--Action column--><template v-else-if="column.key === 'action'"><a-space wrap><a-button size="small" type="primary" block>编辑</a-button><a-button size="small" block>详情</a-button><a-button size="small" danger block>删除</a-button></a-space></template></template></a-table>
</template>
<style lang="less" scoped>
.editable-cell {position: relative;.editable-cell-input-wrapper,.editable-cell-text-wrapper {padding-right: 24px;}.editable-cell-text-wrapper {padding: 5px 24px 5px 5px;}.editable-cell-icon,.editable-cell-icon-check {position: absolute;right: 0;width: 20px;cursor: pointer;}.editable-cell-icon {margin-top: 4px;display: none;}.editable-cell-icon-check {line-height: 28px;}.editable-cell-icon:hover,.editable-cell-icon-check:hover {color: #108ee9;}.editable-add-btn {margin-bottom: 8px;}
}.editable-cell:hover .editable-cell-icon {display: inline-block;
}
</style>

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

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

相关文章

汽车软件开发：ASPICE与ISO26262标准下的质量管理与控制实践

汽车软件开发：ASPICE与ISO26262标准下的质量管理与控制实践

在汽车软件开发中&#xff0c;质量管理与控制是确保软件产品满足预期功能、性能、可靠性和安全性的关键过程。ASPICE&#xff08;Automotive SPICE&#xff09;和ISO 26262标准在这一领域中各自扮演重要角色&#xff0c;共同为汽车软件开发提供了全面的质量管理与控制框架。 AS…
阅读更多...
持续集成/持续部署(CI/CD)工具：Jenkins、GitLab CI等工具的使用

持续集成/持续部署(CI/CD)工具：Jenkins、GitLab CI等工具的使用

持续集成/持续部署(CI/CD)工具&#xff1a;Jenkins、GitLab CI等工具的使用 在软件开发过程中&#xff0c;持续集成/持续部署&#xff08;CI/CD&#xff09;是一种重要的实践&#xff0c;可以帮助我们提高软件质量、加快开发速度和降低风险。CI/CD工具可以自动化软件构建、测试…
阅读更多...
Vue 中的 scoped 和 /deep/ 深度选择器

Vue 中的 scoped 和 /deep/ 深度选择器

Vue在组件里写 css 给 <style> 标签加上 scoped &#xff0c;比如&#xff1a; <style lang"less" scoped> &#xff0c;这样的 css 就是局部的&#xff0c;不会影响其他组件。 假设引入了一个子组件&#xff0c;并希望在组件中修改子组件的样式&#x…
阅读更多...
阿里云Linux中安装MySQL,并使用navicat连接以及报错解决

阿里云Linux中安装MySQL,并使用navicat连接以及报错解决

首先查询是否安装MySQL // linux 使用yum安装或者rpm安装。(就是一个安装工具类似于applStore&#xff0c;brew不必在意) // 区别&#xff1a;yum会自动安装你要安装的东西的其他依赖&#xff0c;rpm不会但会提示你需要安装的东西&#xff0c;比较麻烦&#xff0c;所以采用yum安…
阅读更多...
qt 图形、图像、3D相关知识

qt 图形、图像、3D相关知识

1.qt 支持3d吗 Qt确实支持3D图形渲染。Qt 3D模块是Qt的一个组成部分&#xff0c;它允许开发者在Qt应用程序中集成3D内容。Qt 3D模块提供了一组类和函数&#xff0c;用于创建和渲染3D场景、处理3D对象、应用光照和纹理等。 Qt 3D模块包括以下几个主要组件&#xff1a; Qt 3D …
阅读更多...
Python面试题：请编写一个程序，查找给定列表中的最大和最小值

Python面试题：请编写一个程序，查找给定列表中的最大和最小值

当然&#xff0c;可以使用 Python 编写一个简单的程序来查找给定列表中的最大和最小值。以下是一个示例程序&#xff1a; def find_max_min(values):if not values: # 检查列表是否为空return None, Nonemax_value values[0]min_value values[0]for value in values:if val…
阅读更多...
Camera Raw：首选项 - 常规

Camera Raw：首选项 - 常规

Camera Raw 首选项中的常规 General选项卡可以为 Camera Raw 配置一些基础和常用的设置&#xff0c;这些设置可能影响界面的外观、工作流程的便利性和使用体验。 外观 Appearance 颜色主题 Color Theme 可以选择不同的界面颜色主题。 包括&#xff1a;默认值 Default、最亮 Lig…
阅读更多...
023-GeoGebra中级篇-几何对象之圆锥曲线

023-GeoGebra中级篇-几何对象之圆锥曲线

圆锥曲线是解析几何中的重要部分&#xff0c;它们包括椭圆、双曲线、抛物线和圆。通过使用预先定义的变量&#xff08;如数值、点和向量&#xff09;&#xff0c;我们可以动态地构建这些曲线的方程&#xff0c;并观察它们如何随变量的变化而变化。本文将介绍如何通过定义变量来…
阅读更多...
ruoyi项目前后端分离版本部署-linux系统

ruoyi项目前后端分离版本部署-linux系统

### **ruoyi项目前后端分离版本部署-linux系统****系统环境需求**JDK > 1.8 MySQL > 5.7 Maven > 3.0 Redis Node.js Nginx - 新建目录#tmp存放临时安装包 mkdir -p /data/tmp #service存放软件环境 mkdir -p /data/service #gitee存放代码版本控制库 mkdir -p /data/…
阅读更多...
如何基于大模型开发应用接口

如何基于大模型开发应用接口

一、前言 针对自然语言处理方向&#xff0c;以前要开发一个情感分析、命名实体识别之列的应用是非常麻烦的&#xff0c;我们需要完成收集数据、清理数据、构建模型、训练模型、调优模型等一系列操作&#xff0c;每一步都非常耗时。如今大语言模型&#xff08;LLM&#xff09;的…
阅读更多...
Hive的分区表分桶表

Hive的分区表分桶表

1.分区表&#xff1a; 是Hive中的一种表类型&#xff0c;通过将表中的数据划分为多个子集&#xff08;分区&#xff09;&#xff0c;每个分区对应表中的某个特定的列值&#xff0c;可以提高查询性能和管理数据的效率。分区表的每个分区存储在单独的目录中&#xff0c;分区的定义…
阅读更多...
[Flask笔记]一个完整的Flask程序

[Flask笔记]一个完整的Flask程序

前面讲过Flask是一个轻量级Web开发框架&#xff0c;为什么说是轻量级的呢&#xff0c;因为它用短短几行代码就能运行起来&#xff0c;我们一起来看看最简单的flask框架。 安装Flask 在看Flask框架之前我们需要先安装flask模块&#xff0c;学过python的肯定都知道&#xff0c;…
阅读更多...
shift 命令学习

shift 命令学习

文章目录 shift 命令学习1. shell 几个特殊变量2. shift 使用2.1 每次移动一个参数2.2 每次移动多个参数2.3 与 case 配合使用 shift 命令学习 参考连接&#xff1a;https://www.cnblogs.com/w-j-q/p/14863580.html 1. shell 几个特殊变量 #!/bin/bash echo "\$0:$0"…
阅读更多...
SQL构造一个触发器audit_log

SQL构造一个触发器audit_log

系列文章目录 文章目录 系列文章目录前言 前言 前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到网站&#xff0c;这篇文章男女通用&#xff0c;看懂了就去分享给你的码吧。 描述 构造一个触发…
阅读更多...
SQL 字段类型属性

SQL 字段类型属性

NULL属性 Null/Not Null 属性来限制数据是否可以为空 默认为 Null create table t_01 {username varchar(10) not null--... } Default属性 设置默认值 表字段的时候给定默认数据&#xff0c;在后续字段操作&#xff08;数据新增&#xff09;的时候系统没有检测到字段有数据…
阅读更多...
TPM开启确认

TPM开启确认

TPM 2.0在系统中开启的确认 方法一 &#xff1a;鼠标右击开始菜单-运行&#xff08;或按下键盘的WinR键&#xff09;&#xff0c;输入tpm.msc&#xff0c;然后 回车 弹出窗口 方法二&#xff1a;通过“设置>权限和安全>Windows安全中心>设备安全性” 点击Devices s…
阅读更多...
Transformer相关的课程、视频和工具 - Transformer教程

Transformer相关的课程、视频和工具 - Transformer教程

大家好&#xff01;今天我们来聊聊近年来在人工智能领域大放异彩的Transformer。这个模型自从被提出以来&#xff0c;就迅速成为自然语言处理&#xff08;NLP&#xff09;和其他机器学习任务中的热门工具。可能很多小伙伴对Transformer还是有些陌生&#xff0c;不知道如何学习和…
阅读更多...
PE73_D_E6_BLE

PE73_D_E6_BLE

产品参数 产品型号 PE73_D_E6_BLE 尺寸(mm) 176.2*137.15*80mm 显示技术 电子墨水屏双面显示 显示区域(mm) 163.2(H) * 97.92(V) 分辨率(像素) 800*480 外观颜色 银色 显示颜色 黑/白/红/黄/蓝/绿 视觉角度 180 工作温度 15-35℃ 产品重量 268g 电池容…
阅读更多...
计网ip层重要面经总结

计网ip层重要面经总结

文章目录 127.0.0.1, localhost, 0.0.0.0有什么不同?ipv6还需要NAT吗&#xff1f;DNS查询服务器的基本流程浏览器输入一个URL到显示器显示的过程PING是怎么工作的&#xff1f;ipv4和ipv6究竟有哪些区别&#xff1f;什么是跨域&#xff0c;什么情况下会发生跨域问题&#xff1f…
阅读更多...
学懂C#编程：高级开发技术——深入理解发布-订阅模式（Publisher-Subscriber Pattern）的实现

学懂C#编程：高级开发技术——深入理解发布-订阅模式（Publisher-Subscriber Pattern）的实现

一、理解 发布-订阅模式&#xff08;Publish-Subscribe Pattern&#xff09; 机制 发布-订阅模式&#xff08;Publish-Subscribe Pattern&#xff09;是一种消息传递模式&#xff0c;它允许消息的发送者&#xff08;发布者&#xff09;和消息的接收者&#xff08;订阅者&#x…
阅读更多...
最新文章

Copyright @ 2022~2023