el-table表格中加入输入框

<template><div class="box"><div class="btn"><el-button type="primary">发送评委</el-button><el-button type="primary" @click="flag = true" v-if="!flag">编辑</el-button><el-button type="primary" @click="saveBtn" v-else>保存</el-button></div><el-table :data="tableData" border :header-cell-style="{background: '#e7ebf6',color:'green'}" :cell-style="rowStyle"><el-table-column prop="pf" label="评分项" min-width="100" align="center"><template slot-scope="{row}"><span v-if="!flag">{{row.pf}}</span><el-input type="textarea" :autosize="true" v-else v-model="row.pf" placeholder="请输入内容"></el-input></template></el-table-column><el-table-column prop="mx" label="评分项明细" min-width="200" align="center"><template slot-scope="{row}"><span v-if="!flag">{{row.mx}}</span><el-input type="textarea" :autosize="true" v-else v-model="row.mx" placeholder="请输入内容"></el-input></template></el-table-column><el-table-column prop="bz" label="评分标准" min-width="300" align="center"><template slot-scope="{row}"><span v-if="!flag">{{row.bz}}</span><el-input type="textarea" :autosize="true" v-else v-model="row.bz" placeholder="请输入内容"></el-input></template></el-table-column><el-table-column prop="qz" label="分项权重" min-width="200" align="center"><template slot-scope="{row}"><span v-if="!flag">{{row.qz}}</span><el-input type="textarea" :autosize="true" v-else v-model="row.qz" placeholder="请输入内容"></el-input></template></el-table-column></el-table></div>
</template><script>
export default {data () {return {tableData: [{pf: '基本信息',mx: '公司基本情况',bz: '参与人(企业)的注册资金及规模',qz: '1'},{pf: '基本信息',mx: '资格证明文件完整性',bz: '具备征集说明文件要求中的资格证明文件,齐全有效',qz: '2'},{pf: '技术方案',mx: '系统架构及解决方案整体情况',bz: '系统整体架构设计合理,满足建设独立、专业的电子会计档案系统要求,系统部署灵活,满足稳定性、安全性和可扩展性要求。方案完整清晰,针对性强,可行性高,技术领先,用户操作体验良好。',qz: '3'},{pf: '技术方案',mx: '产品功能及接口',bz: '1、支持建设独立、专业的电子会计档案系统,具备建设独立运作的电子会计档案系统的案例实施经验。(3分) 2、产品功能可扩展、可开发、可配置,可以提供标准化接口供外部系统调用。(3分) 3、产品提供转换版式文件的功能,能够协助不具备版式文件生成条件的企业内部系统,完成符合会计档案归档要求的档案生成功能。(3分) 4、支持档案文件快速检索及查询定位,对需要查询的档案,可以在档案系统独立查看全部资料,无需使用编号,再到其他系统中查询。(3分) 5、支持与会计总账系统、OA系统开发联查接口,能够实现从OA端、会计总账系统端查询调阅档案的功能。(3分)',qz: '30'},{pf: '技术方案',mx: '系统架构及解决方案整体情况',bz: '系统整体架构设计合理,满足建设独立、专业的电子会计档案系统要求,系统部署灵活,满足稳定性、安全性和可扩展性要求。方案完整清晰,针对性强,可行性高,技术领先,用户操作体验良好。',qz: '3'},],flag: false}},methods: {// 保存saveBtn () {console.log(this.tableData)// 掉接口提交// 回到初始状态this.flag = false},// 更改列表样式rowStyle () {return "text-align:left"}}
}
</script><style lang="less" scoped>
.box {margin: 0 30px;
}
.btn {display: flex;justify-content: flex-end;margin-bottom: 20px;
}
</style>

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

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

相关文章

win系统环境搭建(九)——Windows安装chatGPT

windows环境搭建专栏&#x1f517;点击跳转 win系统环境搭建&#xff08;九&#xff09;——Windows安装chatGPT 本系列windows环境搭建开始讲解如何给win系统搭建环境&#xff0c;本人所用系统是腾讯云服务器的Windows Server 2022&#xff0c;你可以理解成就是你用的windows…

全球南方《乡村振兴战略下传统村落文化旅游设计》许少辉八一著辉少许

全球南方《乡村振兴战略下传统村落文化旅游设计》许少辉八一著辉少许

Unity云原生分布式运行时

// 元宇宙时代的来临对实时3D引擎提出了诸多要求&#xff0c;Unity作为游戏行业应用最广泛的3D实时内容创作引擎&#xff0c;为应对这些新挑战&#xff0c;提出了Unity云原生分布式运行时的解决方案。LiveVideoStack 2023上海站邀请到Unity中国的解决方案工程师舒润萱&#x…

倒计时列表实现(小程序端Vue)

//rich-text主要用来将展示html格式的&#xff0c;可以直接使用这个标签 <view class"ptBox" v-for"(item,index) in orderList" :key"index"> <rich-text :nodes"item.limit_time|limitTimeFilter"></rich-text>…

2023_Spark_实验十二:Spark高级算子使用

掌握Spark高级算子在代码中的使用 相同点分析 三个函数的共同点&#xff0c;都是Transformation算子。惰性的算子。 不同点分析 map函数是一条数据一条数据的处理&#xff0c;也就是&#xff0c;map的输入参数中要包含一条数据以及其他你需要传的参数。 mapPartitions函数是一个…

网络编程day03(UDP中的connect函数、tftp)

今日任务&#xff1a;tftp的文件上传下载&#xff08;服务端已经准备好&#xff09; 服务端&#xff08;已上传&#xff09; 客户端&#xff1a; 代码&#xff1a; #include <stdio.h> #include <string.h> #include <stdlib.h> #include <sys/types.h…

编译工具:CMake(八) | cmake 常用指令

编译工具&#xff1a;CMake&#xff08;八&#xff09; | cmake 常用指令 基本指令 基本指令 ADD_DEFINITIONS向 C/C编译器添加-D 定义&#xff0c;比如:ADD_DEFINITIONS(-DENABLE_DEBUG-DABC)&#xff0c;参数之间用空格分割。 如果你的代码中定义了#ifdef ENABLE_DEBUG #end…

Java 调用 GitLabAPI 获取仓库里的文件件 提交记录

1. 需求 项目组 需要做统计&#xff0c;获取每个开发人员的代码提交次数&#xff0c;提交时间&#xff0c;提交人等等&#xff0c;因代码在GitLab上管理&#xff0c;所以需要调用GitLabAPI来获取。 2. 开发 API官网&#xff1a;https://docs.gitlab.com/ee/api/ 2.1 创建自…

java Spring Boot验证码美化,白色背景 随机四个数 每个字随机颜色

我前文 Spring Boot2.7生成用于登录的图片验证码讲述了生成验证码的方法 但是这样生成验证码 非常难看 比较说 验证码是要展示到web程序中的 这样让用户看着 属实不太好 我们可以将接口改成 GetMapping(value "/captcha", produces MediaType.IMAGE_PNG_VALUE) …

RocketMQ 发送事务消息

文章目录 事务的相关理论事务ACID特性CAP 理论BASE 理论 事务消息应用场景MQ 事务消息处理处理逻辑 RocketMQ 事务消息处理流程官网事务消息流程图 rocketmq-client-java 示例&#xff08;gRPC 协议&#xff09;创建事务主题生产者消费者 rocketmq-client 示例&#xff08;Remo…

代码随想录Day1 数组基础

本文详细说明和思路来源于: 代码随想录 视频讲解: 手把手带你撕出正确的二分法 | 二分查找法 | 二分搜索法 | LeetCode&#xff1a;704. 二分查找_哔哩哔哩_bilibili Leetcode T 704 题目链接 704. 二分查找 - 力扣&#xff08;LeetCode&#xff09; 题目概述1: 思路: 1.因…

基于微信小程序的高校宿舍信息管理系统设计与实现(源码+lw+部署文档+讲解等)

前言 &#x1f497;博主介绍&#xff1a;✌全网粉丝10W,CSDN特邀作者、博客专家、CSDN新星计划导师、全栈领域优质创作者&#xff0c;博客之星、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java、小程序技术领域和毕业项目实战✌&#x1f497; &#x1f447;&#x1f3fb;…

局域网下共享文件夹全流程

请注意&#xff1a;配置共享文件夹以便他人无需输入账户和密码访问可能带来安全风险。请确保你明白这一点并在适当的网络环境中操作。 以下说明是基于 Windows 系统的&#xff1a; 步骤 1&#xff1a;共享文件夹 找到你想要共享的文件夹&#xff0c;右击选择“属性”。 转到…

Docker从认识到实践再到底层原理(六-1)|Docker容器基本介绍+命令详解

前言 那么这里博主先安利一些干货满满的专栏了&#xff01; 首先是博主的高质量博客的汇总&#xff0c;这个专栏里面的博客&#xff0c;都是博主最最用心写的一部分&#xff0c;干货满满&#xff0c;希望对大家有帮助。 高质量博客汇总 然后就是博主最近最花时间的一个专栏…

RabbitMQ学习总结(11)—— RabbitMQ 核心概念与架构

MQ 技术概述 什么是 MQ MQ(message queue),从字面意思上看,本质是个队列,FIFO 先入先出,只不过队列中存放的内容是 message 而已,还是一种跨进程的通信机制,用于上下游传递消息。在互联网架构中,MQ 是一种非常常见的上下游 “逻辑解耦+物理解耦” 的消息通信服务。使用…

网页的快捷方式打开自动全屏--Chrome、Firefox 浏览器相关设置

Firefox 的全屏方式与 Chrome 不同&#xff0c;Chrome 自带全屏模式以及APP模式&#xff0c;通过简单的参数即可设置&#xff0c;而Firefox暂时么有这个功能&#xff0c;Firefox 的全屏功能可以通过全屏插件实现。 全屏模式下&#xff0c;按 F11 不会退出全屏&#xff0c;鼠标…

grafana对指标进行组合计算

在使用Grafana配置图表看板时&#xff0c;我们可能需要对多个查询条件筛选出来的结果进行计算&#xff0c;把计算结果生成最终的图表。此时需要用到transform功能【add field from calculation】&#xff1a;

flutter iOS 缺少通知权限,缺少位置权限

App Store Connect 亲爱的开发者, 我们发现了一个或多个问题与您的应用程序&#xff0c;“hayya附近的朋友Chat&Meet”1.0.3(1)最近的交付。您的交付是成功的&#xff0c;但您可能希望在您的下一次交付纠正以下问题: ITMS-90078:缺少推送通知授权-你的应用程序似乎注册了…

pytorch的卷积层池化层和非线性变化 和机器学习线性回归

卷积层&#xff1a; 两个输出的情况 就会有两个通道 可以改变通道数的 最简单的神经网络结构&#xff1a; nn.Mudule就是继承父类 super执行的是 先执行父类函数里面的 forward执行的就是前向网络&#xff0c;就是往前推进的&#xff0c;当然也有反向转播&#xff0c;那就是…

福建福州大型钢结构件3D扫描全尺寸三维测量平面度平行度检测-CASAIM中科广电

高精度三维扫描技术已经在大型工件制造领域发挥着重要作用&#xff0c;特别是在质量检测环节&#xff0c;高效、高精度&#xff0c;可以轻松实现全尺寸三维测量。本期&#xff0c;我们要分享的应用是在大型钢结构件的关键部位尺寸及形位公差检测。 钢结构件&#xff0c;是将多…