当前位置：首页 > 编程日记 > 正文

Ant Design Vue 表格内编辑（附完整源码及效果图）

编程日记 2024-08-02 04:10:00

效果图：

实现关键代码就是表单的 columns 属性对象下标的 scopedSlots：

scopedSlots: {customRender: ''
}

实现完整代码：

<template><div><div class="table-wrapper"><!--每个列的宽度必须比列名总长度大才能使表格所有列对齐，留一个列不设置宽度--><a-table :rowSelection="{selectedRowKeys: selectedRowKeys}" :columns="columns" :dataSource="tableData" borderedsize="middle" :loading="tableLoading"><template v-for="col in customRenderList" v-slot:[col]="text, record, index"><div :key="col"><!-- includes 用来判断当前的输入类型 --><a-input :read-only="readonlyArr.includes(col)" placeholder="请输入"v-if="record.editable && inputScopedSlots.includes(col)" :value="text"@change="e => handleChange(e.target.value, record.key, col)" /><a-date-picker placeholder="请选择时间" v-else-if="record.editable && dateScopedSlots.includes(col)":value="text" @change="onChangeDate($event, record.key, col)" /><a-select placeholder="请选择" style="display: block;"v-else-if="record.editable && selectScopedSlots.includes(col)" :value="text"@change="onChangeSelect($event, record.key, col)"><a-select-option value="1小时">1小时</a-select-option><a-select-option value="2小时">2小时</a-select-option></a-select><span v-else>{{text}}</span></div></template></a-table></div></div>
</template><script>import Moment from 'moment'export default {name: "demo",data() {return {columns: [{title: '开始时间',align: "center",dataIndex: 'beginTime',width: 120,scopedSlots: {customRender: 'beginTime'}},{title: '结束时间',align: "center",dataIndex: 'endTime',width: 120,scopedSlots: {customRender: 'endTime'}},{title: '工时数',align: "center",dataIndex: 'workingHours',width: 120,scopedSlots: {customRender: 'workingHours'}},{title: '工作内容',align: "center",dataIndex: 'jobContent',width: 120,scopedSlots: {customRender: 'jobContent'}},{title: '产出内容上传',align: "center",dataIndex: 'produceUrl',width: 120,scopedSlots: {customRender: 'produceUrl'}}],// 表格数据tableData: [{key: '',beginTime: '2019-12-17',endTime: '2019-12-17',workingHours: '1小时',jobContent: '123',produceUrl: '12421',editable: true}],// 每一列的插槽名 - 表格行内编辑用customRenderList: ['beginTime', 'endTime', 'workingHours', 'jobContent', 'produceUrl'],// 用来匹配插槽中显示input框inputScopedSlots: ['jobContent', 'produceUrl'],// 用来匹配插槽中显示date框dateScopedSlots: ['beginTime','endTime'],// 用来匹配插槽中显示select框selectScopedSlots: ['workingHours'],// 对于某些自动赋值的input框设为 只读readonlyArr: [''],// 表格loadingtableLoading: false,// 表格选中keyselectedRowKeys: []}},methods: {// input 输入changehandleChange(value, rowKey, colName) {const newData = [...this.tableData];const target = newData.filter(item => rowKey === item.key)[0];if (target) {target[colName] = value;this.tableData = newData;}},// 日期框 changeonChangeDate($event, rowKey, colName) {const newData = [...this.tableData];const target = newData.filter(item => rowKey === item.key)[0];if (target) {target[colName] = this.$dateformat($event, 'isoDate');this.tableData = newData;}},// select 框 changeonChangeSelect($event, rowKey, colName) {const newData = [...this.tableData];const target = newData.filter(item => rowKey === item.key)[0];if (target) {target[colName] = $event;// 根据select框的值自动带出某个input的值 - 因为第三列列名为c$event === '1小时' ? target.c = '根据1小时带出的值' : target.c = '根据2小时带出的值'this.tableData = newData;}}}}
</script>

https://www.dkcj.cn/info/12444.html

shell基本用法

#!/bin/bash #使用哪个shell执行echo "hello world" username"tom" echo $username#chmod x ./test.sh 设置可以执行文件#for循环输出 for skill in Ada Coffe Action Java; doecho "I am good at ${skill}Script" done #for file in ls /etc; d…

编程日记2024/08/02 04:00:00

brad wu_一百万归功于Brad Traversy

brad wuBrad Traversy is one of the most appreciated web development teachers on YouTube and he is getting close to 1 Million subscribers. We decided to help him reach this goal by the end of 2019.布拉德特拉弗西 ( Brad Traversy)是YouTube上最受赞赏的网络开发…

编程日记2024/08/02 03:50:00

CSS常见布局解决方案

最近要准备移动端项目，大半年没好好写过CSS了，今天恶补了一下CSS的一些布局，下面做一些分享。水平居中布局 1.margin 定宽 <div class"parent"><div class"child">Demo</div> </div><style…

编程日记2024/08/02 03:40:00

java.io.EOFException java.io.ObjectInputStream$PeekInputStream.readFully 错误

omcat 启动时报以下错误: java.io.EOFException at java.io.ObjectInputStream$PeekInputStream.readFully 错误这个错误碰到好几次了，我的tomcat使用非常频繁，而且部署项目比较多，经常会出一些自己看不懂的问题， 今天解决了这…

编程日记2024/08/02 03:30:00

SQL替换字段中部分字符

示例： tb_item表中image字段中一数据为：jd/4ef8861cf6854de9889f3db9b24dc371.jpg update tb_item set image replace(image,jd,taobao); 替换后: taobao/4ef8861cf6854de9889f3db9b24dc371.jpg

编程日记2024/08/02 03:20:00

flexbox_Flexbox中的Flex基础属性

flexbox弹性基础 (Flex Basis) The flex-basis property defines the size of the flex-item along the main axis of the flex container. The main axis is horizontal if flex-direction is set to row and it’ll be vertical if the flex-direction property is set to co…

编程日记2024/08/02 03:10:00

OpenStack之虚拟机热迁移

这里的环境是centos7版本，openstack K版 1.在各个计算节点设置权限 chmod 755 /var/lib/nova/instances 2.修改各个节点的nova.conf(/etc/nova/nova.conf) vncserver_proxyclient_address虚拟机IP # vncserver_listen0.0.0.0 3.修改所有计算节点libvirt 3.1 修改/e…

编程日记2024/08/02 03:00:00

软件工程概论个人作业02

可怜的二柱子同学，老师又对他的自动出题系统提出了新的要求： 1、题目避免重复； 2、可定制（数量/打印方式）； 3、可以控制下列参数: 是否有乘除法； 是否有括号(最多可以支持十个数参与计算)&#…

编程日记2024/08/02 02:50:00

前端开发学习常用网站网址及介绍（都是免费的）

在开发的时候，想记住所有的单词基本是不可能的，所以就需要进入文档，只要理清需求能做出来，就很不差了！！ 扫码加博主微信 1.百度，俗称度娘，有不懂的就问百度，有问必答&am…

编程日记2024/08/02 02:40:00

sql语句语法多表关联_SQL Delete语句-如何删除行或表，语法示例

sql语句语法多表关联To delete a record in a table you use the DELETE statement.要删除表中的记录，请使用DELETE语句。 Be careful. You can delete all records of the table or just a few. Use the WHERE condition to specify which records do you wan…

编程日记2024/08/02 02:30:00

数据库大数据访问及分区分块优化方案

本文导读：当系统要满足每秒数万次的读写请求的需求时，我们可以用分布式计算、编写优良的程序代码、对海量数据进行分区操作、建立广泛的索引、建立缓存机制、加大虚拟内存、分批处理、使用数据仓库和多维数据库存储、使用负载均衡技术、将数据库的读写分…

编程日记2024/08/02 02:20:00

每周算法讲堂 floyd

http://www.bilibili.com/video/av4108914/ 转载于:https://www.cnblogs.com/qscqesze/p/5284554.html

编程日记2024/08/02 02:10:00

小程序云开发常用语句宝库

查询语句，返回的是 res.data[] 数组调用云函数返回的是res.result get 数据获取返回的是 res.data{} 对象 1.调用云函数 this.DB wx.cloud.database() wx.cloud.init({env: mm-4t7rg }) wx.cloud.callFunction({name: "login",data: {},success(res)…

编程日记2024/08/02 02:00:00

初学api测试_面向初学者的API-在此免费视频课程中学习如何使用API

初学api测试What exactly is an API? How do you use an API? Weve just published a full beginners course about Application Programming Interfaces (APIs) on the freeCodeCamp.org YouTube channel.API到底是什么？ 您如何使用API？ 我们刚刚…

编程日记2024/08/02 01:50:00

整理Simple.Data使用方法

官方:http://simplefx.org/simpledata/docs/index.html Insert var user db.Users.Insert(Name: "Ford", Password: "hoopy", Age: 29);var user new User {Name "Zaphod", Password "zarquon", Age 42}; var actual db.Users.I…

编程日记2024/08/02 01:40:00

css3之border-radius理解

在日常项目过程中，border-radius这个属性算是非常常用的属性之一了，通过设置元素的border-radius值，可以轻松给元素设置圆角边框，甚至实现绘制圆、半圆、四分之一的圆等各种圆角图形。通常我在使用这个属性的时候，一般…

编程日记2024/08/02 01:30:00

deepLink iOS 应用到自己APP 记录

1.了解deeplink 详细的介绍可以在网上查询,这里简单说一下.这项技术主要是为了方便广告跳转而产生的.最大的例子就是淘宝,天猫,京东等购物APP.在第三方APP中点击广告链接直接跳转到对应的客户端的商品的详情中,节省用户的时间,一步到位. 2.自己APP实现deeplink需要的准备工作…

编程日记2024/08/02 01:20:00

小程序 reduce_使用reduce制作的10个更多实用程序功能

小程序 reduceThis time, with a test suite! 这次，带有测试套件！ Previously I wrote about 10 utility functions implemented with JavaScripts reduce function. It was well-received, and I walked away with an even deeper appreciation for th…

编程日记2024/08/02 01:10:00

洛谷1216 数字三角形

题目描述观察下面的数字金字塔。写一个程序来查找从最高点到底部任意处结束的路径，使路径经过数字的和最大。每一步可以走到左下方的点也可以到达右下方的点。 7 3 8 8 1 0 2 7 4 4 4 5 2 6 5 在上面的样例中,从7 到 3 到 8 到 7 到 5 的路径产生了最大 …

编程日记2024/08/02 01:00:00

iOS 依次执行异步网络请求的一种实现

1.首先先介绍一个概念dispatch_semaphore dispatch_semaphore信号量为基于计数器的一种多线程同步机制。用于解决在多个线程访问共有资源时候，会因为多线程的特性而引发数据出错的问题.如果semaphore计数大于等于1，计数-1，返回，程…

编程日记2024/08/02 00:50:00

那些有趣的Webview细节

最近公司的项目"一步"上用到了webview与js交互，主要是用google地图必须要安装有google pay，但是国内的手机都去掉了， 没办法只有用google地图的网页版了， 好在公司ios的小伙伴会h5，英语也不赖， 所…

编程日记2024/08/02 00:40:00

二进制搜索树_二进制搜索树数据结构举例说明

二进制搜索树A tree is a data structure composed of nodes that has the following characteristics:树是由具有以下特征的节点组成的数据结构： Each tree has a root node (at the top) having some value. 每棵树都有一个具有某些值的根节点(在顶部)。 The roo…

编程日记2024/08/02 00:30:00

无序数组及其子序列的相关问题研究

算法中以数组为研究对象的问题是非常常见的. 除了排序大家经常会遇到之外, 数组的子序列问题也是其中的一大分类. 今天我就对自己经常遇到的无序数组的子序列相关问题在这里总结一下. 前置条件: 给定无序数组. 以下所以的问题均以此为前置条件. 例如无序数组nums [2, 1, 3]. 问…

编程日记2024/08/02 00:20:00

IOS使用正则表达式去掉html中的标签元素,获得纯文本

IOS使用正则表达式去掉html中的标签元素,获得纯文本 content是根据网址获得的网页源码字符串 NSRegularExpression *regularExpretion[NSRegularExpression regularExpressionWithPattern:"<[^>]*>|\n"options:0error:nil];content[regularExpretion string…

编程日记2024/08/02 00:10:00

苹果禁止使用热更新 iOS开发程序员新转机来临

今天本是女神们的节日，所有iOS程序员沸腾了！原因是苹果爸爸发狠了，部分iOS开发者收到了苹果的这封警告邮件： [图一苹果邮件] 消息一出，一时间众多开发者众说纷纭，以下是来源于网络的各种看法：…

编程日记2024/08/02 00:00:00

Python中的Lambda表达式

Lambda表达式 (Lambda Expressions) Lambda Expressions are ideally used when we need to do something simple and are more interested in getting the job done quickly rather than formally naming the function. Lambda expressions are also known as anonymous funct…

编程日记2024/08/01 23:50:00