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);
}
}
};