el-table行编辑

news2024/11/13 9:36:37

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

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

        <el-table
          ref="table"
          :data="tableDataList"
          :header-cell-style="{ background: '#F5F7FA', height: '30px' }"
          style="width: 100%; margin: 0 auto"
          height="100%"
          align="center"
          row-key="id"
          stripe
          border
          :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-column
            v-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-input
                  v-model="scope.row[item.prop]"
                  v-focus
                  type="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>

    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 }) {
      // 把每一行的索引放进row
      row.index = rowIndex
    },
    intFormatter(data, item) {
      // 重要项、mqs项和故障模式三个是下拉框
      if (item == 'fault_mode') {
        const text = this.faultModeOptions.filter(item => item.id === data)[0]?.text
        return text || ''
      } else {
        return data
      }
    },
    handleChange(val, row) {
      row.fault_mode_chn = this.faultModeOptions.filter(item => item.id === row.fault_mode)[0]?.text
      updItem(row).then(res => {
        if (res.result == '1') {
          this.$message.success('修改管理项成功')
          this.tabClickIndex = ''
          this.tabClickLabel = ''
        }
      })
    }

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

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

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

相关文章

【H2O2|全栈】关于Photoshop | PS(4)

PS的一些杂谈&#xff08;亖&#xff09; 目录 PS的一些杂谈&#xff08;亖&#xff09; 前言 准备工作 图形工具 基本属性 混合选项 形状图层 文字工具 基本属性 进一步变化文字 组和图层 UI设计案例 预告和回顾 后话 前言 这一篇博客我将会写一下图形工具和…

数据链路层以太网技术与DNS、ICMP协议

我们前面学习到的传输层、网络层。传输层是保证数据可靠传输。而网络层是实现在复杂的网络环境中确定一个合适的路径。我们接下来所说的数据链路层其实就是用于两个设备(同一种数据链路节点)之间进行传递。其实也就是如数次的局域网中设备之间的转发过程。 认识以太网 "…

大数据-124 - Flink State 01篇 状态原理和原理剖析:状态类型 执行分析

点一下关注吧&#xff01;&#xff01;&#xff01;非常感谢&#xff01;&#xff01;持续更新&#xff01;&#xff01;&#xff01; 目前已经更新到了&#xff1a; Hadoop&#xff08;已更完&#xff09;HDFS&#xff08;已更完&#xff09;MapReduce&#xff08;已更完&am…

Pr:首选项 - 音频硬件

Pr菜单&#xff1a;编辑/首选项 Edit/Preferences Premiere Pro 首选项中的“音频硬件” Audio Hardware选项卡可以指定计算机的音频设备和设置&#xff0c;还可以指定 Pr 用于音频回放和录制的 ASIO 和 MME 设置&#xff08;仅限 Windows&#xff09;或 CoreAudio 设置&#x…

C#使用GDI+实现生成验证码

目录 下面是代码的详细解释&#xff1a; 类声明和成员变量 构造函数 窗体加载事件 生成验证码方法 pictureBox1 点击事件 按钮点击事件 完整代码&#xff1a; 总结 这段代码是一个C# Windows Forms应用程序的一部分&#xff0c;用于生成和验证验证码。 下面是代码的详细解…

C# Windows Forms实现绘制画板

目录 C# Windows Forms上绘制画板&#xff1a; 详细解释&#xff1a; TempData临时数据&#xff0c;用来保存画笔相关的信息&#xff0c;如&#xff1a;颜色&#xff0c;大小&#xff0c;坐标等 类声明和成员变量 构造函数 文件菜单项点击事件 保存菜单项点击事件 画笔大…

浙大数据结构:03-树2 List Leaves

这道题我借用了一点上一题的代码思路&#xff0c;这题考察的主要是层序遍历&#xff0c;即用队列来实现&#xff0c;当然此处我依然采用数组模拟队列来实现。 机翻 1、条件准备 map的键存下标&#xff0c;后面值分别存左右子树的下标&#xff0c;没有子树就存-1. head数组只…

python脚本源码如何使用PyOxidizer编译Windows可执行文件

使用 PyOxidizer 将上述代码编译为 Windows 可执行文件&#xff0c;可以按照以下步骤进行&#xff1a; 一、准备工作 确保已经安装了 PyOxidizer 和 Rust 开发环境&#xff0c;如前文所述。 二、创建 PyOxidizer 配置文件 创建一个名为pyoxidizer.toml的配置文件&#xff0c;内…

go急速入门API开发

go急速入门 1、安装Go和对应编辑器2、编写helloWord3、项目目录开发4、编写一个http服务器5、 使用Gin框架基本使用使用部分中间件自定义中间件 6、部署 1、安装Go和对应编辑器 go官网&#xff0c;下载自己电脑对应版本即可。安装完成之后打开cmd输入go即可弹出对应提示。 对…

ffmpeg(各个系统版本安装- Windows11-Mac-Linux)

各个系统上的安装不建议使用编译安装&#xff0c;大佬的话可以 编译安装会各种环境问题&#xff0c;直接使用别人安装好的就行 1.Windows11上安装ffmpeg 1.官网下载ffmpeg 进入Download FFmpeg网址&#xff0c;点击下载windows版ffmpeg&#xff0c;使用别人编译好的版本即可 …

文法的例题

答案&#xff1a;B 知识点&#xff1a; 文法 一个形式文法是一个有序四元组G{V,T,S,P}&#xff0c;其中&#xff1a; V&#xff1a;非终结符。不是语言组成部分&#xff0c;不是最终结果&#xff0c;可理解为占位符 T&#xff1a;终结符。是语言的组成部分&#xff0c;是最…

自用NAS系列1-设备

拾光坞 拾光坞多账号绑定青龙面板SMBWebdav小雅alist下载到NASDocker安装迅雷功能利用qBittorrentEEJackett打造一站式下载工具安装jackett插件 外网访问内网拾光客户端拾光穿透公网ipv6路由器配置ipv6拾光坞公网验证拾光坞域名验证 拾光坞 多账号绑定 手机注册拾光坞账号&am…

Web Bluetooth 与点对点连接

前言 需求需要实现手持终端设备与 web 网页的点对点数据传输&#xff0c;不希望有服务器参与&#xff0c;想到了 web 的 USB 与 Bluetooth API&#xff0c;对 Web Bluetooth API 进行了研究。 蓝牙 GATT 基础知识 GATT&#xff08;通用属性配置文件&#xff0c;蓝牙低功耗&a…

K8S 发布应用

前言 昨儿个用 unbuntu20.04 又装了一次K8S 用的 kubeadm containerd Cilium (CNI) 又重新撸了一遍 这里只记录 应用发布的笔记 正文 #创建deployment kubectl create deployment nginx --imagenginx #我这边大约30秒后显示为 ready kubectl get deployments kubectl desc…

4.7 Sensors -- useScroll

4.7 Sensors – useScroll https://vueuse.org/core/useScroll/ 作用 响应式的监听滚动位置和状态。 官方示例 <script setup lang"ts"> import { useScroll } from vueuse/coreconst el ref<HTMLElement | null>(null) const { x, y, isScrolling…

【Python系列】只更新非空的字段

&#x1f49d;&#x1f49d;&#x1f49d;欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学…

数字电路专题:verilog 阻塞赋值和非阻塞赋值

verilog 阻塞赋值 和 非阻塞赋值 “”阻塞赋值&#xff0c; ”<”非阻塞赋值。阻塞赋值为执行完一条赋值语句&#xff0c;再执行下一条&#xff0c;可理解为顺序执行&#xff0c;而且赋值是立即执行&#xff1b; 非阻塞赋值可理解为并行执行&#xff0c;不考虑顺序&#x…

【python计算机视觉编程——7.图像搜索】

python计算机视觉编程——7.图像搜索 7.图像搜索7.1 基于内容的图像检索&#xff08;CBIR&#xff09;从文本挖掘中获取灵感——矢量空间模型&#xff08;BOW表示模型&#xff09;7.2 视觉单词**思想****特征提取**&#xff1a; 创建词汇7.3 图像索引7.3.1 建立数据库7.3.2 添加…

构建并训练卷积神经网络(CNN)对CIFAR-10数据集进行分类

深度学习实践&#xff1a;构建并训练卷积神经网络&#xff08;CNN&#xff09;对CIFAR-10数据集进行分类 引言 在计算机视觉领域中&#xff0c;CIFAR-10数据集是一个经典的基准数据集&#xff0c;广泛用于图像分类任务。本文将介绍如何使用PyTorch框架构建一个简单的卷积神经…

微信小程序uniappvue3版本-控制tabbar某一个的显示与隐藏

1. 首先在pages.json中配置tabbar信息 2. 在代码根目录下添加 tabBar 代码文件 直接把微信小程序文档里面的四个文件复制到自己项目中就可以了 3. 根据自己的需求更改index.js文件 首先我这里需要判断什么时候隐藏某一个元素&#xff0c;需要引入接口 然后在切换tabbar时&#…