当前位置: 首页 > article >正文

vue3 + ts + element-plus 表格中的input按回车聚焦到下一行

功能需求:

1、 表格中使用插槽,将input嵌入到表格中

2、设置 ref,表格设置静态 ref,ref="table",input 设置动态 ref,:ref="`input`+scope.$index"

3、input 增加回车事件 @keyup.enter.native="onEnterPressDown(scope.$index)"

  // 表格
  const table = ref();
  // 表格选择行
  const tableSelectedRow = ref<SampleItemResult>();
  // 获取当前组件实例
  import { getCurrentInstance } from "vue";
  const thisInstance = getCurrentInstance();

  // 按回车,判定结论,聚焦到下一行的结果input输入框
  const onEnterPressDown = (rowIndex: number) => {
    // 判定结论
    // if (tableSelectedRow.value?.result !== null && tableSelectedRow.value?.result !== "") {
    if (tableSelectedRow.value!.result) {
      tableSelectedRow.value!.conclusion = judgeConclusion(tableSelectedRow.value!.result);
    }

    // 聚焦到下一行的结果input输入框
    focusNextRow(rowIndex);
  };

  // 判定结论
  function judgeConclusion(result: string) {
    let conclusion = "";
    if (result) {
      // 由前端进行结论判定
      conclusion = (result.length < 2) ? "合格" : "不合格";
    }
    return conclusion;
  };

  // 聚焦到下一行的结果input输入框
  function focusNextRow(currentRowIndex: number) {
    if (thisInstance !== null) {
      // 最后一行不用聚焦处理
      if (currentRowIndex + 1 < tableData.value.length) {
        // @ts-ignore
        // 聚焦到下一行的结果input输入框
        thisInstance.refs["input" + (currentRowIndex + 1)].focus();
        // 设置聚焦到的这一行为当前行
        tableSelectedRow.value = tableData.value[currentRowIndex + 1];
        // 设置表格当前行
        table.value.setCurrentRow(tableSelectedRow.value);
      }
    }
  };


http://www.kler.cn/a/442520.html

相关文章:

  • MYSQL学习笔记(二):SELECT基本查询
  • 【Vim Masterclass 笔记13】第 7 章:Vim 核心操作之——文本对象与宏操作 + S07L28:Vim 文本对象
  • FLASK 上传文件
  • 如何在 Linux、MacOS 以及 Windows 中打开控制面板
  • 【C语言】字符串函数详解
  • Python在Excel工作表中创建数据透视表
  • 电商大数据的几种获取渠道分享!
  • 数据可视化-4. 漏斗图
  • 国内主流数据库介绍及技术分享
  • vue iframe进行父子页面通信并切换URL
  • 基于Streamlit和OpenAI大模型的Chatbot App支持图片的多模态输入
  • 使用 Copilot 增强创造力:Mighty Media 的卓越数字化之旅
  • 【论文复刻】2021-2012年环境规制影响企业融资约束吗—基于新《环保法》的准自然实验(C刊《证券市场导报》)
  • RPA 在促销活动自动化处理中的创新应用
  • CSS3:重塑网页设计的新力量
  • YOLO目标检测算法
  • 【DevOps工具篇】Gitlab Runner设置(使用Docker in docker作为Runner)
  • LAPACK 程序 SSYEVD 的计算特征值的应用实例 C/Fortran
  • 数据结构 ——哈希表
  • React工具和库面试题目(二)
  • 2024.12.15 TCP/IP 网络模型有哪几层?(二)
  • C++ 的衰退复制(decay-copy)
  • 画一颗随机数
  • Firefox 基本设置备忘
  • cursor的composer功能
  • Mac/Linux 快速部署TiDB