封装一个Element-ui生成一个可行内编辑的表格(vue2项目)

这个封装的是一个供整个项目使用的表格,可多次复用.放在一个全局使用的公共组件文件下.

大致功能介绍,封装自定义指令,点击获得焦点,显示输入框,失去焦点显示文本内容,类型是字典决定类型,图片可以显示图片名还是上传图片

 

子组件

<script>
export default {props: {//生成表头fields: {type: Array,default: () => [],},//数据tableData: {type: Array,default: () => [],},},data() {return {};},created() {},
// 自定义指令directives: {focus: {inserted: function (el) {el.querySelector("input").focus();},},},methods: {// 点击框 获取焦点 column列,row 行cellClick(column, row) {column.iseditor = true;row.isnameSelected = true;},//输入框失去焦点触发,此处用提示框提示修改blurEvent(column, row) {//  console.log(column, row);column.iseditor = false;row.isnameSelected = false;},},
};
</script>
<template><div><el-table :data="tableData" border style="width: 100%"><el-table-column:prop="field.prop":label="field.label":min-width="field.minWidth || 140"v-for="(field, index) in fields":key="index"show-overflow-tooltip><template slot-scope="scope"><div v-if="field.slot"><slot :name="field.slot" :row="scope.row" /></div><div v-else><div><el-inputv-if="field.iseditor && scope.row.isnameSelected"v-model="scope.row[field.prop]"@focus="cellClick(field, scope.row)"@blur="blurEvent(field, scope.row)"v-focus></el-input><p @click="cellClick(field, scope.row)" v-else>{{ scope.row[field.prop] || "--" }}</p></div></div></template></el-table-column></el-table></div>
</template>
<style scoped>
</style>
<style>
.el-tooltip__popper {max-width: 1000px;
}
.disabled .el-upload--picture-card {display: none;
}
.avatar-uploader .el-upload {border: 1px dashed #d9d9d9;border-radius: 6px;cursor: pointer;position: relative;overflow: hidden;
}
.avatar-uploader .el-upload:hover {border-color: #409eff;
}
.avatar-uploader-icon {font-size: 28px;color: #8c939d;width: 178px;height: 178px;line-height: 178px;text-align: center;
}
.avatar {width: 178px;height: 178px;display: block;
}
</style>

父组件

这里还有封装了一个文件上传的组件嵌套在表格中,算是拓展

<script>
import editComponents from "../../components/editComponents";
export default {components: { editComponents },data() {return {fields: [{prop: "industryCode",label: "产品",iseditor: false,},{prop: "id",label: "id",iseditor: false,},{prop: "paragraphType",label: "产品类型",iseditor: false,slot: "paragraphType",
//根据这个slot来决定是否要使用插槽,让父组件可以更好地使用数据,不用传来传去,下面是一样的},{prop: "paragraphImage",label: "产品图片",slot: "paragraphImage",iseditor: false,},{prop: "action",label: "操作",slot: "action",},],tableData: [{industryCode: "苹果",id: "15",paragraphType: "1",paragraphImage: "15.png",},{industryCode: "苹果",id: "16",paragraphType: "2",paragraphImage: "15.png",},{industryCode: "苹果",id: "17",paragraphType: "1",paragraphImage: "15.png",},],fileList: [], //文件总数fileList1: [], //详情文件总数dialogImageUrl: "",dialogVisible: false,disabled: false,};},computed: {//文件上传地址upLoadUrl() {//process.env.VUE_APP_BASE_API 检测当前环境来决定接口路径//测试环境 VUE_APP_BASE_API = '/stage-api'if (process.env.VUE_APP_BASE_API == "/stage-api") {return "接口地址"; //   例如:'/minio/upload'// 生产} else if (process.env.VUE_APP_BASE_API == "生产接口") {return "接口地址";} else {// 本地return "接口地址";}},},created() {this.getlist();},methods: {//获取数据getlist() {// 发请求获取数据写在这里this.tableData = this.tableData.map((item) => {return { ...item, isnameSelected: false };});},// 添加hAdd() {const productObj1 = {industryCode: "",id: "",paragraphType: "",paragraphImage: "",iseditor: false,uuId: Math.random(),};this.tableData.push(productObj1);},// 删除del(row) {this.tableData = this.tableData.filter((item) => item.uuId !== row.uuId || item.id !== row.id);},//图片上传===========================handleRemove(file) {console.log(file);console.log(this.$refs.upload);let uploadFiles = this.$refs.upload.uploadFiles;for (var i = 0; i < uploadFiles.length; i++) {if (uploadFiles[i]["url"] == file.url) {uploadFiles.splice(i, 1);}}},handlePictureCardPreview(file) {this.dialogImageUrl = file.url;this.dialogVisible = true;},handleDownload(file) {console.log(file);},// 文件上传成功-----------------async handleSuccess(response, row) {// 处理上传成功后的逻辑console.log("上传成功", response, row);this.fileName = response.data.fileName;row.paragraphImage = response.data.fileName;},handleError(err, file, fileList) {// 处理上传失败后的逻辑console.error("上传失败", err);},//  selectedLabel(selectedValue) {//   if (selectedValue === "1") {//     return "选择一";//   } else if (selectedValue === "2") {//     return "选择二";//   }// },async onSubmit() {// 删除不需要的属性this.tableData.forEach(function (obj) {if (obj.hasOwnProperty("iseditor")) {delete obj.iseditor;}if (obj.hasOwnProperty("uuId")) {delete obj.uuId;}if (obj.hasOwnProperty("isnameSelected")) {delete obj.isnameSelected;}});// 新增if (!this.industryCode) {//   新增请求写在这里console.log(res);if (res.message == "success") {this.$message({message: res.data,type: "success",duration: 1000,});} else {this.$message.error(res.data);}} else {// 修改请求写在这里console.log(res);if (res.message == "success") {this.$message({message: res.data,type: "success",duration: 1000,});this.goBack();} else {this.$message.error(res.data);}}},},
};
</script>
<template><div><el-button @click="hAdd" type="primary">添加</el-button><editComponents :fields="fields" :tableData="tableData"><template #action="{ row }"><el-button type="text" size="small" @click="del(row)">删除</el-button></template><template #paragraphImage="{ row }"><div><p>{{ row.paragraphImage || "--" }}</p><el-uploadref="upload":file-list="fileList1":action="upLoadUrl"list-type="picture-card":on-success="(e) => handleSuccess(e, row)":on-error="handleError"><i slot="default" class="el-icon-plus"></i><div slot="file" slot-scope="{ file }"><imgclass="el-upload-list__item-thumbnail":src="file.url"alt=""/><span class="el-upload-list__item-actions"><spanclass="el-upload-list__item-preview"@click="handlePictureCardPreview(file)"><i class="el-icon-zoom-in"></i></span><spanv-if="!disabled"class="el-upload-list__item-delete"@click="handleRemove(file)"><i class="el-icon-delete"></i></span></span></div></el-upload><el-dialog :visible.sync="dialogVisible"><img width="100%" :src="dialogImageUrl" alt="" /></el-dialog></div></template><template #paragraphType="{ row }"><div><el-select v-model="row.paragraphType" placeholder="请选择"><el-option label="选择一" value="1"></el-option><el-option label="选择二" value="2"></el-option></el-select><!-- <p @click="cellClick(row)">{{ selectedLabel(row.titleTypeSecond) || "--" }}{{row}}</p> --></div></template></editComponents><el-card><div><el-button type="primary" round @click="onSubmit">提交</el-button></div></el-card></div>
</template>
<style scoped>
</style>

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

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

相关文章

SpringCloud ---day1

认识微服务 单体架构 微服务架构 方便进行打包上线,版本的更新上线,降低项目之间的耦合度,减少代码量巨大导致的编译/打包时间长的问题 SpringCloud简介 项目熟悉 业务流程 项目模块划分 服务拆分原则 什么时候拆: 对于一个初创的项目&#xff0c;首先要做的是验证项目的可…

el-table :span-method合并单元格

<el-table :data"tableData" :span-method"objectSpanMethod" border style"width: 100%" :height"300"><el-table-column type"index" label"序号" width"50"></el-table-column>&l…

ajax同步与异步,json-serve的安装与使用,node.js的下载

20.ajax json 轻量级的数据格式做配置文件网络传输 xml 重量级的数据格式 可扩展标记语言做配置文件网络传输 现在目前主流就是大量采用json做网络传输数据格式 1.ajax的概念: 与服务器进行’通信’的一种技术,能够实现异步的刷新页面 **同步:**按照顺序一步步的执行,容易造…

算法通过村第十四关-堆|黄金笔记|中位数

文章目录 前言数据流中的中位数的问题总结 前言 提示&#xff1a;我独自度过了太多的时光&#xff0c;沉默已成一种习惯。 帕瑞尔马卡姆《夜航西飞》 这个是一个比较难的题目&#xff0c;要不尝试一下看看。 数据流中的中位数的问题 参考题目地址&#xff1a;295. 数据流的中位…

MyBatisPlus-02

一 查询条件的三种 1.按条件查询 //方式一&#xff1a;按条件查询QueryWrapper qw new QueryWrapper();qw.lt("age",18);List<User> userList userDao.selectList(qw);System.out.println(userList); 2.lambda格式按条件查询 //方式二&#xff1a;lambda格…

基于EtherCAT的机器人多轴同步运动控制

随着工业自动化的发展&#xff0c;机器人在生产线上的应用越来越广泛。为了实现高效、精确的运动控制&#xff0c;机器人的多轴运动必须能够实现同步操作&#xff0c;它能够提高机器人的运动精度和稳定性&#xff0c;实现更高效的生产线操作。同时&#xff0c;它也为机器人的协…

WebGPU入门一

1 WebGPU学习开发环境配置 WebGPU的环境配置比较简单&#xff0c;不需要vite或webpack配置一个复杂的开发环境&#xff0c;直接使用.html文件即可。 1.1 支持WebGPU的浏览器 Chrome 113 beta测试版开始默认支持WebGPU。 1.2 index.html文件 创建index.html文件&#xff0c…

C++进阶篇1---继承

一、继承的概念和定义 1.1概念 继承机制是面向对象程序设计使代码可以复用的最重要的手段&#xff0c;它允许程序员在保持原有类特性的基础上进行扩展&#xff0c;增加功能&#xff0c;这样产生新的类&#xff0c;称为派生类。继承呈现了面向对象程序设计的层次结构&#xff…

ExoPlayer架构详解与源码分析(5)——MediaSource

系列文章目录 ExoPlayer架构详解与源码分析&#xff08;1&#xff09;——前言 ExoPlayer架构详解与源码分析&#xff08;2&#xff09;——Player ExoPlayer架构详解与源码分析&#xff08;3&#xff09;——Timeline ExoPlayer架构详解与源码分析&#xff08;4&#xff09;—…

掌握Python爬虫实现网站关键词扩展提升曝光率

目录 一、关键词优化的重要性 二、关键词优化的基本方法 1、选择与网站内容相关的关键词 2、控制关键词的密度和分布 3、关键词的层次布局 三、Python爬虫实现网站关键词扩展 1、确定目标网站 2、分析目标网站的HTML结构 3、编写Python爬虫代码 4、分析爬取到的关键词…

【算法练习Day22】 组合总和 III电话号码的字母组合

​&#x1f4dd;个人主页&#xff1a;Sherry的成长之路 &#x1f3e0;学习社区&#xff1a;Sherry的成长之路&#xff08;个人社区&#xff09; &#x1f4d6;专栏链接&#xff1a;练题 &#x1f3af;长路漫漫浩浩&#xff0c;万事皆有期待 文章目录 组合总和 III剪枝 电话号码…

深入理解React中的useEffect钩子函数

引言&#xff1a; React是一种流行的JavaScript库&#xff0c;它通过组件化和声明式编程的方式简化了前端开发。在React中&#xff0c;一个核心概念是组件的生命周期&#xff0c;其中包含了许多钩子函数&#xff0c;用于管理组件的不同阶段。其中之一就是useEffect钩子函数&…

LuaJit交叉编译移植到ARM Linux

简述 Lua与LuaJit的主要区别在于LuaJIT是基于JIT&#xff08;Just-In-Time&#xff09;技术开发的&#xff0c;可以实现动态编译和执行代码&#xff0c;从而提高了程序的运行效率。而Lua是基于解释器技术开发的&#xff0c;不能像LuaJIT那样进行代码的即时编译和执行。因此&…

系统架构与Tomcat的安装和配置

2023.10.16 今天是学习javaweb的第一天&#xff0c;主要学习了系统架构的相关知识和原理&#xff0c;下载了web服务器软件&#xff1a;Tomcat&#xff0c;并对其进行了配置。 系统架构 包括&#xff1a;C/S架构 和 B/S架构。 C/S架构&#xff1a; Client / Server&#xff0…

离散数学 学习 之 递推方程和生成函数

递推方程 注意这里的特征根一定不是相等 特解的话一般要去设出基本的形式 这是0 次多项式 生成函数

【JAVA】集合与背后的逻辑框架,包装类,List,Map,Set,静态内部类

❤️ Author&#xff1a; 老九 ☕️ 个人博客&#xff1a;老九的CSDN博客 &#x1f64f; 个人名言&#xff1a;不可控之事 乐观面对 &#x1f60d; 系列专栏&#xff1a; 文章目录 collectionCollection创建collection使用泛型collection方法 Map 接口Map的存储结构HashMap和Tr…

lenovo联想笔记本ThinkPad系列T15p或P15v Gen3(21DA,21DB,21D8,21D9)原厂Win11系统镜像

下载链接&#xff1a;https://pan.baidu.com/s/1V4UXFhYZUNy2ZQ8u4x1AFg?pwdqz0s 系统自带指纹驱动、人脸识别驱动、显卡、声卡等所有驱动、出厂主题壁纸、Office办公软件、Lenovo联想电脑管家等预装程序 所需要工具&#xff1a;32G或以上的U盘 文件格式&#xff1a;ISO …

一篇文章带你搞定所有二叉树题型的递归思维(思路超详细)

文章目录 &#x1f380;前言&#xff1a;&#x1f3c5;先在开头总结一下&#xff0c;二叉树解题的思维模式分两类&#xff1a;&#x1f387;先解释一下“前序位置”&#xff0c;“后序位置”的意思&#x1f3e8;举一个简单的例子&#xff1a; &#x1fa80;下面通过两道例题&am…

从自动化到测开,测试人员逆袭之路从此起步

在当今竞争激烈的软件测试行业中&#xff0c;近期的招聘市场确实面临一些挑战。大量的求职者争相涌入岗位&#xff0c;许多热衷于功能测试的人士甚至难以找到理想的工作机会。更不幸的是&#xff0c;连自动化测试和性能测试这些专业领域也受到了测试开发人员的竞争压力。然而&a…

C# 图解教程 第5版 —— 第4章 类型、存储和变量

文章目录 4.1 C# 程序是一组类型声明4.2 类型是一种模板&#xff08;*&#xff09;4.3 实例化类型4.4 数据成员和函数成员4.5 预定义类型4.6 用户定义类型4.7 堆和栈&#xff08;*&#xff09;4.8 值类型和引用类型4.9 变量4.9.1 变量声明4.9.2 多变量声明&#xff08;*&#x…