码农知识堂 - 1000bd
  •   Python
  •   PHP
  •   JS/TS
  •   JAVA
  •   C/C++
  •   C#
  •   GO
  •   Kotlin
  •   Swift
  • vue3点击表格某个单元格文本就切换成输入框,其他单元格不变化


    1. <el-table :data="data.tableData" height="60vh" border scrollbar-aways-on>
    2. <el-table-column label="序号" type="index" width="80" fixed />
    3. <el-table-column label="操作" width="120" fixed>
    4. <template #default="{ row }">
    5. <el-button type="danger" text @click="deleteBtn(row)" :disabled="row.status">删除el-button>
    6. <el-button style="color: #3592FF" text @click="enableBtn(row)">{{ row.status ? '停用' : '启用' }}el-button>
    7. template>
    8. el-table-column>
    9. <el-table-column prop="status" label="状态" width="120" />
    10. <el-table-column prop="phone" label="手机号" />
    11. <el-table-column prop="kanno" label="操作人" />
    12. <el-table-column prop="kanno" label="操作时间" />
    13. <el-table-column prop="kanno" label="创建人" />
    14. <el-table-column prop="createTime" label="创建时间" />
    15. <el-table-column label="姓名">
    16. <template #default="scope">
    17. <template v-if="scope.cellIndex == cellIndex && scope.$index == index">
    18. <el-input v-model="scope.row.status" @blur="saveCell" />
    19. template>
    20. <template v-else>
    21. <div @click="editCell(scope, scope.$index)">{{ scope.row.status }}div>
    22. template>
    23. template>
    24. el-table-column>
    25. el-table>
    1. const cellIndex = ref('')
    2. const index = ref('')
    3. function editCell(row, ind) {
    4. cellIndex.value = row.cellIndex
    5. index.value = ind
    6. }
    7. function saveCell() {
    8. cellIndex.value = ''
    9. index.value = ''
    10. }

    效果如下

    点击第一行的文本

    点击第二行文本

  • 相关阅读:
    nodejs+vue+elementui社区居民信息管理及数据分析与可视化系统设计
    王庆友-架构的本质:如何打造一个有序的系统?
    选座位吧(10)
    Android全新UI框架之Compose状态管理与重组
    性能的极致,Rust的加持,Zed-Dev编辑器快速搭建Python3.10开发环境
    Java测试(11) --- selenium
    Premiere Elements 2024(PR简化版)直装版
    vue3初体验-基于vue3+ant design封装公共弹框
    爱奇艺向抖音开启授权,打开内容价值的新大门
    zabbix基于Zabbix-in-telegram实现图片告警(centos7)
  • 原文地址:https://blog.csdn.net/2202_75509848/article/details/133900883
  • 最新文章
  • 攻防演习之三天拿下官网站群
    数据安全治理学习——前期安全规划和安全管理体系建设
    企业安全 | 企业内一次钓鱼演练准备过程
    内网渗透测试 | Kerberos协议及其部分攻击手法
    0day的产生 | 不懂代码的"代码审计"
    安装scrcpy-client模块av模块异常,环境问题解决方案
    leetcode hot100【LeetCode 279. 完全平方数】java实现
    OpenWrt下安装Mosquitto
    AnatoMask论文汇总
    【AI日记】24.11.01 LangChain、openai api和github copilot
  • 热门文章
  • 十款代码表白小特效 一个比一个浪漫 赶紧收藏起来吧!!!
    奉劝各位学弟学妹们,该打造你的技术影响力了!
    五年了,我在 CSDN 的两个一百万。
    Java俄罗斯方块,老程序员花了一个周末,连接中学年代!
    面试官都震惊,你这网络基础可以啊!
    你真的会用百度吗?我不信 — 那些不为人知的搜索引擎语法
    心情不好的时候,用 Python 画棵樱花树送给自己吧
    通宵一晚做出来的一款类似CS的第一人称射击游戏Demo!原来做游戏也不是很难,连憨憨学妹都学会了!
    13 万字 C 语言从入门到精通保姆级教程2021 年版
    10行代码集2000张美女图,Python爬虫120例,再上征途
Copyright © 2022 侵权请联系2656653265@qq.com    京ICP备2022015340号-1
正则表达式工具 cron表达式工具 密码生成工具

京公网安备 11010502049817号