el-table行编辑

ops/2025/1/12 18:43:17/

需求:单点行编辑并且请求接口更新数据,表格中某几个字段是下拉框取值的,剩下的是文本域;展示的时候 需要区分下拉框编码还是中文

故障模式这个展示的是fault_mode编码,但要显示的文字fault_mode_chn 这点需要注意

        <el-tableref="table":data="tableDataList":header-cell-style="{ background: '#F5F7FA', height: '30px' }"style="width: 100%; margin: 0 auto"height="100%"align="center"row-key="id"stripeborder:row-class-name="tableRowClassName"@cell-click="tabClick"><!--@select="handleSelectRow"@select-all="handleSelectAllRow"@row-click="handleRowClick"@current-change="handleRowCurrent"--><el-table-column align="center" label="操作" min-width="60" fixed="left"><template slot-scope="scope"><div><a class="mc" title="修改" @click="handleAddMod('MOD', scope.row)"><em class="el-icon-edit" /></a><span class="spaces" style="margin: -2px 2px">|</span><a class="mc" title="删除" @click="handleDel(scope.row)"><em slot="reference" class="el-icon-delete mc" style="cursor: pointer" /></a></div></template></el-table-column><!-- <el-table-column type="selection" width="40" fixed /> --><el-table-columnv-for="(item, index) in viewColumns":key="index":fixed="item.fixed":prop="item.prop":align="item.align":label="item.label":min-width="item.width":show-overflow-tooltip="true"><!-- 行要能编辑  数据都能改 --><template slot-scope="scope"><!-- MQS项和重要项目下拉框都是一个值 --><span v-if="scope.row.index === tabClickIndex && tabLabel == item.label && tabClickLabel == '2'"><el-select v-model="scope.row[item.prop]" size="small" style="width: 100%" @change="handleChange($event, scope.row)"><el-option v-for="(and, ind) in mqsItemOption" :key="ind" :label="and.text" :value="and.text" /></el-select></span><!-- 故障模式的 --><span v-else-if="scope.row.index === tabClickIndex && tabLabel == item.label && tabClickLabel == '4'"><el-select v-model="scope.row[item.prop]" v-focus size="small" style="width: 100%" @change="handleChange($event, scope.row)"><el-option v-for="and in faultModeOptions" :key="and.id" :label="and.text" :value="and.id" /></el-select></span><!-- 剩下的 都是文本域输入 --><span v-else-if="scope.row.index === tabClickIndex && tabLabel == item.label && tabClickLabel == '1'"><el-inputv-model="scope.row[item.prop]"v-focustype="textarea":row="4"class="fixed-height-textarea"@change="handleChange($event, scope.row)"/></span><span v-else v-html="intFormatter(scope.row[item.prop], item.prop)" /></template></el-table-column><!-- 有修改删除功能 --></el-table>

javascript">    tabClick(row, column, cell, event) {if (this.viewColumns.some((ele) => ele.label == column.label)) {this.tabClickIndex = row.index}if (column.label == 'MQS' || column.label == '重要项目') {this.tabClickLabel = '2'} else if (column.label == '故障模式') {this.tabClickLabel = '4'} else {this.tabClickLabel = '1'}this.tabLabel = column.label},tableRowClassName({ row, rowIndex }) {// 把每一行的索引放进rowrow.index = rowIndex},intFormatter(data, item) {// 重要项、mqs项和故障模式三个是下拉框if (item == 'fault_mode') {const text = this.faultModeOptions.filter(item => item.id === data)[0]?.textreturn text || ''} else {return data}},handleChange(val, row) {row.fault_mode_chn = this.faultModeOptions.filter(item => item.id === row.fault_mode)[0]?.textupdItem(row).then(res => {if (res.result == '1') {this.$message.success('修改管理项成功')this.tabClickIndex = ''this.tabClickLabel = ''}})}

 关于行编辑,可以参考elementui官网提供的方法


http://www.ppmy.cn/ops/108830.html

相关文章

如何实现过滤器、拦截器和全局异常捕获?

目录 一、实现过滤器 1、创建过滤器 2、注册过滤器 3. 使用注解配置过滤器 4. 在Web.xml中配置过滤器 5. 过滤器的执行顺序 6. 过滤器的链式调用 二、实现拦截器 1、创建拦截器 2. 注册拦截器 3. 使用注解方式注册拦截器 4. 拦截器的执行顺序 5. 拦截器的匹配规则…

Mac M1安装Hive

一、下载解压Hive 1.官网地址 https://dlcdn.apache.org/hive/ 2.选择对应版本进行下载&#xff0c;这里我以3.1.3为例&#xff1b; 3.下载好后&#xff0c;进行解压&#xff0c;并重命名为hive-3.1.3&#xff0c;放到资源库目录下&#xff1b; 二、配置系统环境 1.打开~/…

实现一个简单的线程池:C++实战指南

实现一个简单的线程池&#xff1a;C实战指南 在现代软件开发中&#xff0c;多线程编程是提高应用程序性能和响应速度的重要手段。然而&#xff0c;直接管理线程可能会导致代码复杂且难以维护。线程池是一种有效的解决方案&#xff0c;它通过复用一组线程来执行多个任务&#x…

在线动漫信息平台

你好呀&#xff0c;我是计算机学姐码农小野&#xff01;如果有相关需求&#xff0c;可以私信联系我。 开发语言&#xff1a;Java 数据库&#xff1a;MySQL 技术&#xff1a;Spring Boot框架 工具&#xff1a;IDEA/Eclipse、Navicat、Maven 系统展示 首页 会员后台 管理员…

在单向链表中找环

在单向链表中找环也是有多种办法&#xff0c;不过快慢双指针方法是其中最为简洁的方法之一&#xff0c;接下来介绍这种方法。 首先两个指针都指向链表的头部&#xff0c;令一个指针一次走一步&#xff0c;另一个指针一次走两步&#xff0c;如果它们相遇了&#xff0c;证明有环…

Yarn原理图

Yarn是hadoop的三大组件之一&#xff0c;是资源调度器&#xff0c;负责资源调度和资源的分配。具体原理如下图&#xff1a; 客户端向resource Manager发送资源请求。 RM接收到请求之后&#xff0c;会在某一台机器上创建Application Master &#xff0c;并建立心跳机制进行反向注…

单词排序C++实现

代码如下&#xff1a; #include<iostream> #include<string> #include<fstream> #include<map> #include<iomanip> #include<algorithm> #include<vector>int read_file(std::map<std::string,int> &map_words) {std::st…

系统架构设计师|关于系统架构-002

&#x1f4eb; 作者简介&#xff1a;「六月暴雪飞梨花」&#xff0c;专注于研究Java&#xff0c;就职于科技型公司后端工程师 &#x1f3c6; 近期荣誉&#xff1a;华为云云享专家、阿里云专家博主、腾讯云优秀创作者、腾讯云TDP-KOL、ACDU成员、墨天轮技术专家博主 &#x1f52…