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,一经查实,立即删除!

相关文章

面试系列之《LinuxShell》(更新中)

1.用awk命令实现一个词频统计。 假设文件名“data”&#xff0c;文件内容&#xff1a; A B C D A C D D B C C 1.1. python实现 因为不熟悉awk命令&#xff0c;当时用python实现的&#xff1a; res_dict {} with open(./data, r, encodingutf-8) as fp:for line in fp:for …

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

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

使用 nohup 运行 Python 脚本

简介&#xff1a;在数据科学、Web 开发或者其他需要长时间运行的任务中&#xff0c;我们经常需要让 Python 脚本在后台运行。尤其是在远程服务器上&#xff0c;可能因为网络不稳定或需要执行多个任务&#xff0c;我们不希望 Python 脚本因为终端关闭而被终止。这时&#xff0c;…

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

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

达梦数据库随系统开机自动启动脚本

写一个脚本&#xff0c;实现在服务器开机后自动启动达梦数据库的功能。 1. 在/etc/init.d/目录下&#xff0c;编写脚本&#xff0c;并将脚本命名为startdm.sh。脚本内容实现如下&#xff1a; #!/bin/bash #chkconfig:2345 80 90 #decription:启动达梦# 切换到 dmdba 用户 su …

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) …

Spring Task(简略笔记)

介绍 Spring Task是Spring框架提供的任务调度工具&#xff0c;可以按照约定的时间自动执行某个代码逻辑。 Corn表达式 corn表达式其实就是一个字符串&#xff0c;通过corn表达式可以定有任务触发的时间 构成规则&#xff1a;分为6或7个域&#xff0c;由空格分隔开&#xff0…

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;右击选择“属性”。 转到…

play() failed because the user didn‘t interact with the document优化媒体不能自动播放

1. 问题 谷歌浏览器 video 元素设置 autoplay&#xff0c;我们原意是希望页面加载时自动播放&#xff0c;但实际上并没有自动播放&#xff0c;在控制台报错如下&#xff1a; Uncaught (in promise) DOMException: play() failed because the user didn’t interact with the d…

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

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

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

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