ElementUI table+dialog实现一个简单的可编辑的表格

table组件如何实现可编辑呢?

我的需求是把table组件那样的表格,实现它点击可以弹出一个框,然后在这个框里面输入你的东西,然后将他回显回去,当然,输入的有可能是时间啥的。

为什么要弹出弹层不在框上直接编辑呢?因为框太小了,用户可能看不见输入的是啥。

我们可以利用element组件的插槽,获取数值,然后回显到表格里。

HTML部分

我用了一个弹层来写这个功能,如果测试效果,可以直接在主页面引入 ,将弹层的控制开关改为true。

<template><el-drawer v-model="drawerVisible" size="calc(100% - 210px)" @close="resetForm"><el-container><el-form ref="ruleFormRef2" label-position="right" :model="form" label-width="138px"><div class="form-left"><div class="sepcial_about"><div class="tableForm"><el-table :data="testDatas" border style="width: 700px"><el-table-column v-for="(col, idx) in columnList" :key="col.prop" :index="idx" :width="idx === 1 ? '180px' : ''"><template #header><p>{{ col.label }}</p></template><template #default="{ row }"><p :class="col.prop == 'remark' ? 'p_remark' : 'p1111'" @click="e => handleEdit(0, row, col)">{{ col.prop == "time" ? changeTime(row[col.prop]) : row[col.prop] }}</p></template></el-table-column><el-table-column width="120"><template #header><p class="p_specail">操作</p></template><template #default="scope"><p class="p1111"><el-button link type="primary" size="large" @click.prevent="delRow(scope, 0)">删除</el-button></p></template></el-table-column></el-table><el-button type="primary" class="mt-4" style="width: 100%" @click="addRow(0)">新增</el-button></div></div></div></el-form><el-dialog v-model="dialogVisible" title="添加" width="30%" center align-center><span>{{ sureMsg }}</span><template #footer><span class="dialog-footer"><el-button type="primary" @click="toSure">确 认</el-button></span></template></el-dialog><el-dialog v-model="addDialog" :title="addTitle" width="30%" center align-center><el-date-picker v-if="isTime" v-model="addinput" type="daterange" format="YYYY/MM/DD" value-format="YYYY-MM-DD" /><el-inputv-if="isNum"resize="none"maxlength="15"show-word-limitv-model="addinput"type="textarea"size="large"placeholder="请输入"/><el-inputv-if="!isNum && !isTime"resize="none"maxlength="500"show-word-limitv-model="addinput"type="textarea"size="large"placeholder="请输入"/><template #footer><span class="dialog-footer"><el-button type="primary" @click="sava">保存</el-button></span></template></el-dialog></el-container></el-drawer>
</template>

JS

1.渲染数据集合

自定义的表头,HTML结构中通过v-for 循环表头列表,进行label的取值来构建最基础的表格

// 表格之中的数据
const testDatas: any = ref([]);// 表头列表
const columnList: any = ref([{ prop: "projectName", label: "测试1" },{ prop: "time", label: "时间段" },{ prop: "projectContentSummary", label: "测试2" }
]);

2.handleEdit函数

这个函数主要是用来控制弹层的弹出,通过行的标签名字判断需要什么输入的值。根据whatSava的值来判断你点击的是哪个表格,这个参数在HTML结构写死,cellRow和cellCol就是在渲染的时候带入的行的值和列的值。可以获得标签名字或者prop字段用来做判断。当然,这些名字也可以用来设置弹出弹框的弹框名字。

然后判断prop的值来看是不是需要输入 或者是 时间段格式的,让各自的开关变为true或者false

并且根据cellRow[cellCol.prop]这个值来对弹出来的框进行赋值,也就是回显。

const addinput = ref("");
const addTitle = ref("");
const addCode = ref();
const addProp = ref();
const isTime = ref(false);
const savaWhat = ref();
const isNum = ref(false);
const handleEdit = (whatSava: any, cellRow: any, cellCol: any) => {if (whatSava == "0") {savaWhat.value = 0;}if (cellCol.prop == "ceshi1" || cellCol.prop == "ceshi2") {isTime.value = false;if (cellCol.prop == "ceshi2") {isNum.value = true;} else {isNum.value = false;}addTitle.value = cellCol.label;addProp.value = cellCol.prop;addCode.value = cellRow.index;addinput.value = cellRow[cellCol.prop];addDialog.value = true;} else {isTime.value = true;addTitle.value = cellCol.label;addProp.value = cellCol.prop;addCode.value = cellRow.index;addinput.value = cellRow[cellCol.prop];addDialog.value = true;}
};

3.保存弹框函数

这个函数就是弹出层的保存函数,先找到你点击的是哪个框,然后把弹框里面输入的东西赋值给他,如果是数字的话,就用正则限制一下,不让他输入数字以外的东西。最后要清空一下,防止下次回显。

const sava = () => {let idx = testDatas.value.findIndex((p: any) => p.index == addCode.value);if (addProp.value == "ceshi2") {if (!/^[0-9]*$/.test(addinput.value)) {ElMessage.warning("请输入数字");return;}testDatas.value[idx][addProp.value] = addinput.value;} else {testDatas.value[idx][addProp.value] = addinput.value;}addinput.value = "";addDialog.value = false;
};

4.清洗时间格式函数

因为我们日期时间选择器,得到的是一个数组,所以我们回显的时候,应该拿数组的第一项和第二项,然后拼接起来,得到我们回显的正确格式。

//时间格式清洗
const changeTime = (data: any) => {if (!data) {return "";} else {let data1 = data[0] + "~" + data[1];return data1;}
};

5.添加函数

只需要我们知道添加的是哪个表格的,单表格就可以忽略whatAdd这个参数。

逻辑就是先判断他是不是为空,为空的话给他单纯的加一行,不为空的话,得到数组的长度,给他加一个index,我在写的过程中,发现我们没有办法获得一个标识,所以我写了一个index来当作唯一标识,当然,这个在获取后端接口的时候,需要你获取后端给你数组的长度,然后再依次相加就不会导致错误的出现。

// 添加一行
const addRow = (whatAdd: number) => {if (whatAdd == 0) {let obj: any = {};if (testDatas.value.length == 0) {obj.index = "0";columnList.value.forEach((p: any) => {obj[p.prop] = "";});testDatas.value[0] = obj;} else {const weiyi = testDatas.value[testDatas.value.length - 1].index;columnList.value.forEach((p: any) => {obj[p.prop] = "";});obj.index = String(Number(weiyi) + 1);testDatas.value[testDatas.value.length] = obj;}}
};

6.删除函数

因为删除标签在table表格之中,所以我们可以用scope准确的获得是哪一行,然后用whatDel判断你删除的是哪个表格。

//删除
const delRow = (scope: any, whatDel: number) => {const arrIndex = scope.$index; //唯一标识//将testDatas中的第arrIndex项数据删除if (whatDel == 0) {testDatas.value.splice(arrIndex, 1);}
};

CSS

<style scoped lang="scss">
:deep(.el-textarea__inner) {height: 200px;
}
:deep(.cell) {text-align: center !important;height: 45px;padding: 0;
}
.p1111 {height: 50px;line-height: 50px !important;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;padding: 0;margin: 0;text-align: center !important;
}.tableForm {width: 700px;margin-left: 35px;margin-top: 20px;
}
.sepcial_about {width: 500px;padding-left: 40px;box-sizing: border-box;margin-bottom: 60px;position: relative;> :first-child {width: 1000px;margin-bottom: 10px;}
}
.sepcial_about .mt-4 {position: absolute;width: 40px !important;height: 30px !important;bottom: 10px;left: 800px;z-index: 999;
}
.sepcial_about :deep(.el-table) {display: block;height: 100%;
}
:deep(.el-date-editor) {width: 100% !important;height: 50px;text-align: center;
}.form-left {padding-top: 20px;
}:deep(.el-form-item__content) {/* margin-top: 20px; */margin-left: 40px !important;
}:deep(.el-form-item__label) {font-size: 16px;color: black;
}
</style>

 全部代码

<template><el-drawer v-model="drawerVisible" size="calc(100% - 210px)" @close="resetForm"><el-container><el-form ref="ruleFormRef2" label-position="right" :model="form" label-width="138px"><div class="form-left"><div class="sepcial_about"><div class="tableForm"><el-table :data="testDatas" border style="width: 700px"><el-table-column v-for="(col, idx) in columnList" :key="col.prop" :index="idx" :width="idx === 1 ? '180px' : ''"><template #header><p>{{ col.label }}</p></template><template #default="{ row }"><p :class="col.prop == 'remark' ? 'p_remark' : 'p1111'" @click="e => handleEdit(0, row, col)">{{ col.prop == "time" ? changeTime(row[col.prop]) : row[col.prop] }}</p></template></el-table-column><el-table-column width="120"><template #header><p class="p_specail">操作</p></template><template #default="scope"><p class="p1111"><el-button link type="primary" size="large" @click.prevent="delRow(scope, 0)">删除</el-button></p></template></el-table-column></el-table><el-button type="primary" class="mt-4" style="width: 100%" @click="addRow(0)">新增</el-button></div></div></div></el-form><el-dialog v-model="addDialog" :title="addTitle" width="30%" center align-center><el-date-picker v-if="isTime" v-model="addinput" type="daterange" format="YYYY/MM/DD" value-format="YYYY-MM-DD" /><el-inputv-if="isNum"resize="none"maxlength="15"show-word-limitv-model="addinput"type="textarea"size="large"placeholder="请输入"/><el-inputv-if="!isNum && !isTime"resize="none"maxlength="500"show-word-limitv-model="addinput"type="textarea"size="large"placeholder="请输入"/><template #footer><span class="dialog-footer"><el-button type="primary" @click="sava">保存</el-button></span></template></el-dialog></el-container></el-drawer>
</template><script setup lang="tsx" name="addConfig">
import { ref, reactive } from "vue";
import { ElMessage } from "element-plus";
const drawerVisible = ref(false);
const addDialog = ref(false);
const addinput = ref("");
const testDatas: any = ref([]);
const columnList: any = ref([{ prop: "ceshi1", label: "测试1" },{ prop: "time", label: "时间段" },{ prop: "ceshi2", label: "测试2" }
]);
const addTitle = ref("");
const addCode = ref();
const addProp = ref();
const isTime = ref(false);
const savaWhat = ref();
const isNum = ref(false);
const handleEdit = (whatSava: any, cellRow: any, cellCol: any) => {if (whatSava == "0") {savaWhat.value = 0;}if (cellCol.prop == "ceshi1" || cellCol.prop == "ceshi2") {isTime.value = false;if (cellCol.prop == "ceshi2") {isNum.value = true;} else {isNum.value = false;}addTitle.value = cellCol.label;addProp.value = cellCol.prop;addCode.value = cellRow.index;addinput.value = cellRow[cellCol.prop];addDialog.value = true;} else {isTime.value = true;addTitle.value = cellCol.label;addProp.value = cellCol.prop;addCode.value = cellRow.index;addinput.value = cellRow[cellCol.prop];addDialog.value = true;}
};
const sava = () => {let idx = testDatas.value.findIndex((p: any) => p.index == addCode.value);if (addProp.value == "ceshi2") {if (!/^[0-9]*$/.test(addinput.value)) {ElMessage.warning("请输入数字");return;}testDatas.value[idx][addProp.value] = addinput.value;} else {testDatas.value[idx][addProp.value] = addinput.value;}addinput.value = "";addDialog.value = false;
};
let form: any = reactive({});
//时间格式清洗
const changeTime = (data: any) => {if (!data) {return "";} else {let data1 = data[0] + "~" + data[1];return data1;}
};
//清空数据
const resetForm = () => {form.companyName = "";form.linkman = "";form.companyType = "";form.contactTitle = "";form.contactPhone = "";form.id1 = [];form.id2 = [];form.idCardPhoto = [];form.publicCreditInformationReportOfEnterpriseInstitutions = [];form.businessLicenseOrLegalRepresentativeCertificate = [];form.lastYearBankCertificationDocuments = [];form.taxPaymentMaterialsForThePastYear = [];form.employeePaymentCertificateForThePastYear = [];form.declarationOfMajorIllegalRecords = [];form.representativeProjects = [];form.actualImplementationSituation = [];form.other = [];testDatas.value = [];
};
// 添加一行
const addRow = (whatAdd: number) => {if (whatAdd == 0) {let obj: any = {};if (testDatas.value.length == 0) {obj.index = "0";columnList.value.forEach((p: any) => {obj[p.prop] = "";});testDatas.value[0] = obj;} else {const weiyi = testDatas.value[testDatas.value.length - 1].index;columnList.value.forEach((p: any) => {obj[p.prop] = "";});obj.index = String(Number(weiyi) + 1);testDatas.value[testDatas.value.length] = obj;}}
};
//删除
const delRow = (scope: any, whatDel: number) => {const arrIndex = scope.$index; //唯一标识//将testDatas中的第arrIndex项数据删除if (whatDel == 0) {testDatas.value.splice(arrIndex, 1);}
};
const acceptParams = () => {drawerVisible.value = true;
};
defineExpose({acceptParams
});
</script><style scoped lang="scss">
:deep(.el-textarea__inner) {height: 200px;
}
:deep(.cell) {text-align: center !important;height: 45px;padding: 0;
}
.p1111 {height: 50px;line-height: 50px !important;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;padding: 0;margin: 0;text-align: center !important;
}
.tableForm {width: 700px;margin-left: 35px;margin-top: 20px;
}
.sepcial_about {width: 500px;padding-left: 40px;box-sizing: border-box;margin-bottom: 60px;position: relative;> :first-child {width: 1000px;margin-bottom: 10px;}
}
.sepcial_about .mt-4 {position: absolute;width: 40px !important;height: 30px !important;bottom: 10px;left: 800px;z-index: 999;
}
.sepcial_about :deep(.el-table) {display: block;height: 100%;
}
:deep(.el-date-editor) {width: 100% !important;height: 50px;text-align: center;
}
.form-left {padding-top: 20px;
}
:deep(.el-form-item__content) {/* margin-top: 20px; */margin-left: 40px !important;
}
:deep(.el-form-item__label) {font-size: 16px;color: black;
}
</style>

 

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

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

相关文章

最近iphone手机的交管12123闪退,打不开的解决办法?

苹果手机系统和新版软件不配&#xff0c;终极决绝办法&#xff1a;升级IOS系统就好 可能是手机的内存不足了&#xff0c;因为在使用APP时&#xff0c;需要占用手机的内存&#xff0c;如果手机内存不足以支持软件允许&#xff0c;软件就会闪退。车主可以清理一下手机的内存&…

弹窗msvcp140_1.dll丢失的解决方法,超简单的方法分享

在计算机使用过程中&#xff0c;我们经常会遇到一些错误提示&#xff0c;其中最常见的就是缺少某个文件的错误。最近&#xff0c;我在使用某些软件时&#xff0c;遇到了一个名为“msvcp140_1.dll”的错误提示。这个错误通常出现在运行某些程序时&#xff0c;由于缺少了msvcp140…

项目总结报告(案例模板)

软件项目总结报告模板套用&#xff1a; 项目概要项目工作分析经验与教训改进建议可纳入的项目过程资产 --------进主页获取更多资料-------

2023年【汽车驾驶员(中级)】最新解析及汽车驾驶员(中级)试题及解析

题库来源&#xff1a;安全生产模拟考试一点通公众号小程序 2023年汽车驾驶员&#xff08;中级&#xff09;最新解析为正在备考汽车驾驶员&#xff08;中级&#xff09;操作证的学员准备的理论考试专题&#xff0c;每个月更新的汽车驾驶员&#xff08;中级&#xff09;试题及解…

Doris中的物化视图-查询(十九)

物化视图创建完成后&#xff0c;用户的查询会根据规则自动匹配到最优的物化视图。 比如我们有一张销售记录明细表&#xff0c;并且在这个明细表上创建了三张物化视图。一个存储了不同时间不同销售员的售卖量&#xff0c;一个存储了不同时间不同门店的销售量&#xff0c;以及每…

C#,《小白学程序》第二课:数组,循环与排序

1 什么是数组&#xff1f; 数组 Array 是一组数值&#xff08;数 或 值&#xff09;。 int[] a; int[,] b; int[][] c; Anything[] d; 都是数组。 2 排序 排序就是按大小、名字、拼音或你指定的信息进行比较后排队。 排序是数组最基本的功能需求。 3 文本格式 /// <summa…

《数据结构、算法与应用C++语言描述》-代码实现散列表(线性探查与链式散列)

散列表 完整可编译运行代码&#xff1a;Github:Data-Structures-Algorithms-and-Applications/_22hash/ 定义 字典的另一种表示方法是散列&#xff08;hashing&#xff09;。它用一个散列函数&#xff08;也称哈希函数&#xff09;把字典的数对映射到一个散列表&#xff08…

html table样式的设计 表格边框修饰

<!DOCTYPE html> <html> <head> <meta http-equiv"Content-Type" content"text/html; charsetutf-8" /> <title>今日小说排行榜</title> <style> table {border-collapse: collapse;border: 4px double red; /*…

Python之Pygame游戏编程详解

一、介绍 1.1 定义 Pygame是一种流行的Python游戏开发库&#xff0c;它提供了许多功能&#xff0c;使开发人员可以轻松创建2D游戏。它具有良好的跨平台支持&#xff0c;可以在多个操作系统上运行&#xff0c;例如Windows&#xff0c;MacOS和Linux。在本文中&#xff0c;我们将…

单链表的反转?太细了哥们!细到离谱!

单链表的反转&#xff08;面试常出&#xff09;&#xff1a; ​ 单链表的反转&#xff0c;可以通过很多种方法实现。包括迭代法&#xff0c;递归法&#xff0c; 迭代法&#xff1a; 定义三个指针&#xff1a;prev、current和next&#xff0c;它们分别表示前一个节点、当前节点…

NSGA-III求解微电网多目标优化调度(MATLAB)

一、NSGA-III简介 NSGA-III算法由Kalyanmoy Deb和Himanshu Jain于 2014年提出。 参考文献&#xff1a;Deb K , Jain H . An Evolutionary Many-Objective Optimization Algorithm Using Reference Point-Based Nondominated Sorting Approach, Part I: Solving Problems With …

[chroot+seccomp逃逸] THUCTF2019 之 固若金汤

题目分析 附件为一个源码, 其中注释我都写好了, 主要就讲关键的知识点. #define _GNU_SOURCE#include <stdio.h> #include <stdlib.h> #include <fcntl.h> #include <string.h> #include <errno.h> #include <sched.h> #include <uni…

【C/PTA —— 10.函数1(课外实践)】

C/PTA —— 10.函数1&#xff08;课外实践&#xff09; 一.函数题6-1 符号函数6-2 求排列数6-3 求一个大于10的n位整数w的后n-1位的数&#xff0c;并作为函数值返回。6-4 其右上三角&#xff08;含主对角线&#xff09;元素之和。6-5 字符串比较6-6 使用函数求素数和6-7 使用函…

【电子通识】为什么说做产品不是简单的将不同的技术进行搭积木?

很多人说做产品的硬件工程师&#xff0c;其实就是将专项技术工程师已经调好的模块进行拼接。类似于小孩将积木搭成一个房子的形状&#xff0c;虽然不同人搭的房子风格迥异&#xff0c;但所使用的原材料却都是一样的。 首先我并不同意这种看法&#xff0c;原因是产品工程师是需要…

JVM深入理解

JVM深入理解&#xff08;一&#xff09; JVM是什么 JRE、JDK和JVM 的关系 JVM原理 1、JVM是什么&#xff1f; JVM是Java Virtual Machine&#xff08;Java虚拟机&#xff09;的缩写&#xff0c;由一套字节码指令集、一组寄存器、一个栈、一个垃圾回收堆和一个存储方法域等组…

MediaCodec详解

MediaCodec 是Android平台提供的一个API&#xff0c;用于对音频和视频数据进行编码&#xff08;转换为不同的格式&#xff09;和解码&#xff08;从一种格式转换回原始数据&#xff09;。它是Android 4.1&#xff08;API级别16&#xff09;及以上版本的一部分&#xff0c;允许开…

【教3妹学编程-算法题】统计和小于目标的下标对数目

2哥 : 3妹&#xff0c;OpenAI的宫斗剧迎来了大结局&#xff01;OpenAI宣布阿尔特曼复职CEO&#xff0c;董事会重组 3妹&#xff1a;啊&#xff1f;到底谁才是幕后操纵者啊&#xff0c;有咩有揪出来 2哥 : 也不是很清楚&#xff0c;据说在被开除的几周前&#xff0c;前CEO曾谴责…

Linux 家目录和根目录

摘要&#xff1a; 在 Linux 操作系统中&#xff0c;家目录和根目录是两个非常重要的概念。它们是 Linux 文件系统中的两个关键节点&#xff0c;为用户和系统进程提供存储、管理和访问文件和目录的接口。本文旨在深入探讨和理解这两个目录的结构、功能和使用方式&#xff0c;同时…

行情分析 - - 加密货币市场大盘走势(11.24)

大饼昨日震荡幅度很小&#xff0c;而今天延续昨日的空头思路。当然如果从MACD日线来看&#xff0c;处于上涨趋势&#xff0c;稳健的可以选择观望等待。空头思路是因为目前EMA21均线和EMA55均线依然保持很远&#xff0c;最近两个月BTC上涨40%&#xff0c;而最近持续保持高位很快…

Twincat使用:EtherCAT通信扫描硬件设备链接PLC变量

EtherCAT通信采用主从架构&#xff0c;其中一个主站设备负责整个EtherCAT网络的管理和控制&#xff0c;而从站设备则负责在数据环网上传递数据。 主站设备可以是计算机、工控机、PLC等&#xff0c; 而从站设备可以是传感器、执行器、驱动器等。 EL3102:MDP5001_300_CF8D1684;…