+ @clear="filterDataHandle" @input="filterDataHandle" @keydown="handleInputKeydown" />
-
-
-
-
-
+
+
+
+
+
+
@@ -49,8 +50,7 @@ import { ElEmpty } from 'element-plus';
interface Field {
prop: string;
label: string;
- width: number;
- showTooltip?: boolean;
+ width?: number;
enablePinyinSearch?: boolean; //是否参与拼音搜索
}
@@ -90,7 +90,7 @@ const searchInput = ref();
const filterData = ref<{ [key: string]: any; pinyinMap: Record
}[]>([]);
// 存储预处理后的带拼音数据
const processedTableData = ref<{ [key: string]: any; pinyinMap: Record }[]>([]);
-
+const currentIndex = ref(-1);
// 预处理数据:生成拼音信息
const processTableData = (data: object[]) => {
return data.map((item: any) => {
@@ -117,8 +117,15 @@ const processTableData = (data: object[]) => {
const visibleChange = (val: any) => {
searchKey.value = '';
if (val) {
+
nextTick(() => {
searchInput.value.focus();
+
+ currentIndex.value = filterData.value.findIndex(item => item[props.value!] === props.data);
+ if (currentIndex.value >= 0) {
+ tableRef.value.setCurrentRow(filterData.value[currentIndex.value]);
+ tableRef.value.setScrollTop(currentIndex.value * 25);
+ }
});
}
filterDataHandle()
@@ -137,15 +144,84 @@ watch(() => props.tableData, (newVal) => {
handleDataEcho();
}, { deep: true });
-// 数据回显处理
-const handleDataEcho = () => {
- if (props.data === null || props.data === undefined) return;
- // 查找匹配的行数据
- const row: any = props.tableData.find((item: any) => props.objKey && item[props.objKey] === props.data)
- selectShowValue.value = row ? (props.label ? row[props.label] : (props.value ? row[props.value] : '')) : '';
+
+// 监听绑定值数据变化,重新处理
+watch(() => props.data, (newVal) => {
+ // 数据回显
+ handleDataEcho();
+}, { deep: true });
+
+// 输入框键盘事件处理(专门处理上下键)
+const handleInputKeydown = (e: KeyboardEvent) => {
+ // 仅处理上下方向键
+ if (e.key !== "ArrowUp" && e.key !== "ArrowDown") return;
+
+ // 阻止事件冒泡到输入框父元素
+ e.stopPropagation();
+
+ // 如果有筛选数据,转移焦点到表格容器
+ if (filterData.value.length > 0) {
+ // 筛选后让表格容器获得焦点
+ nextTick(() => {
+ // 通过组件内部的 DOM 结构关系查找当前实例的表格容器 避免找不到table焦点
+ const dropdown = searchInput.value.$el.closest('.select-table-dropdown');
+ const tableContainer = dropdown?.querySelector('div[tabindex="0"]') as HTMLElement;
+ if (tableContainer) {
+ tableContainer.focus();
+ }
+
+ // 手动触发一次表格容器的键盘事件
+ const event = new KeyboardEvent('keydown', { key: e.key });
+ tableContainer?.dispatchEvent(event);
+ });
+ }
};
+// 监听table键盘事件(核心)
+const handleKeydown = (e: any) => {
+ // console.log('e==>', e);
+ // 仅处理方向键和回车键
+ if (!['ArrowUp', 'ArrowDown', 'Enter'].includes(e.key)) return;
+ // 阻止默认行为(如页面滚动)
+ e.preventDefault();
+
+ // 根据方向键更新“当前选中行索引”
+ const maxIndex = filterData.value.length - 1; // 末行索引
+ if (e.key === "ArrowUp") {
+ // 按↑:索引减1,最小为0(首行)
+ currentIndex.value = Math.max(0, currentIndex.value - 1);
+ } else if (e.key === "ArrowDown") {
+ // 按↓:索引加1,最大为 maxIndex(末行)
+ currentIndex.value = Math.min(maxIndex, currentIndex.value + 1);
+ }
+
+ tableRef.value.setCurrentRow(filterData.value[currentIndex.value]);
+
+ // 滚动到当前行
+ tableRef.value.setScrollTop(currentIndex.value * 25);
+
+ // 回车确认
+ if (e.key === "Enter") {
+ const currentRow = filterData.value[currentIndex.value];
+ handleRowChange(currentRow);
+ }
+}
+
+// 数据回显处理
+const handleDataEcho = () => {
+ if (props.data === null || props.data === undefined) {
+ selectShowValue.value = '';
+ emits('update:data', null);
+ // emits('getDataValue', null);
+
+ } else {
+ // 查找匹配的行数据
+ const row: any = props.tableData.find((item: any) => props.objKey && item[props.objKey] === props.data)
+ selectShowValue.value = row ? (props.label ? row[props.label] : (props.value ? row[props.value] : '')) : '';
+ }
+
+};
// 搜索过滤逻辑
const filterDataHandle = () => {
@@ -155,6 +231,8 @@ const filterDataHandle = () => {
// 空搜索时显示全部预处理数据
filterData.value = [...processedTableData.value];
return;
+ } else {
+ currentIndex.value = 0
}
filterData.value = processedTableData.value.filter((item: any) => {
@@ -180,11 +258,16 @@ const filterDataHandle = () => {
return matchLabel || matchValue || matchLabelPinyin || matchValuePinyin || matchOtherField;
});
+
+ if (filterData.value.length > 0) {
+ tableRef.value.setScrollTop(0)
+ tableRef.value.setCurrentRow(filterData.value[0]);
+ }
};
const handleRowChange = (val: any) => {
- setLabel(val);
emits("update:data", props.value ? val[props.value] : val);
+ setLabel(val);
};
const setLabel = (val: any) => {
@@ -194,7 +277,8 @@ const setLabel = (val: any) => {
selectShowValue.value = val[props.value];
}
if (props.objKey) {
- emits('getDataValue', val[props.objKey]);
+ // 返回值objKey对应的对象数据
+ emits('getDataValue', val);
}
selectTable.value.blur();
};
@@ -207,9 +291,12 @@ const clearHandle = () => {
\ No newline at end of file
diff --git a/src/components/vxeTable/index.vue b/src/components/vxeTable/index.vue
index 57d1452..67af1a6 100644
--- a/src/components/vxeTable/index.vue
+++ b/src/components/vxeTable/index.vue
@@ -80,7 +80,7 @@ const props = defineProps({
// 纵向滚动配置
scrollYConfig: {
type: Object,
- default: () => ({ enabled: true, rSize: 50, adaptive: true })
+ default: () => ({ enabled: true, rSize: 30, adaptive: true })
},
// 表格尺寸
size: {
diff --git a/src/views/checkCode/report/index.vue b/src/views/checkCode/report/index.vue
index bbf7e27..64e3cdc 100644
--- a/src/views/checkCode/report/index.vue
+++ b/src/views/checkCode/report/index.vue
@@ -12,7 +12,7 @@
-
+
@@ -20,16 +20,16 @@
-
-
-
+
-
-
-
+
@@ -68,7 +68,6 @@
-