弹出选择框支持键盘事件

 

html代码

<!-- 入仓类型选择 -->
          <el-dialog v-model="RCVisible" title="选择"
            destroy-on-close width="400px" @keydown="selectRC($event)" >
            <el-table tooltip-effect="dark"
              :data="RCselectData" row-key="ID"
              highlight-current-row="true" border style="width:100%"
              @row-dblclick="RCSelectClick"
                        ref="tableRC"
            >
              <el-table-column prop="入仓类型" label="入仓类型" width="360" />                   
            </el-table>
          </el-dialog>

js代码

//入仓类型回车事件
const getRCsubmit = (event) => {
    GetRC()
}
const RCVisible = ref(false)
const RCselectData = reactive([])
//获取仓库信息
const GetRC = async () => {
  const data = [{'入仓类型':'产品入库'},{'入仓类型':'委外入库'},{'入仓类型':'采购入库'}] //选择框数据
  RCselectData.splice(0, RCselectData.length, ...data)
  setRCCurrent(RCselectData[0])
  RCVisible.value=true
}
//选择
const RCSelectClick = (row, column, event) => {
  const { 入仓类型 } = row
  formData.value.入仓类型=入仓类型
  RCVisible.value = false
}
const tableRC=ref()
const setRCCurrent = (row) => {
  setTimeout(()=>{
      tableRC.value?.setCurrentRow(row) 
      const { 入仓类型 } = row
      formData.value.入仓类型=入仓类型
  })
}
const RCIndex = ref(0);
const RCCurrent = ref(0);
//按键事件
const selectRC = (event) => {
    if (event.keyCode === 40) { // 向下箭头
        if (RCIndex.value < RCselectData.length - 1) {
            RCIndex.value++;
            setRCCurrent(RCselectData[RCIndex.value]);
        } else {
            RCIndex.value = 0;
            setRCCurrent(RCselectData[RCIndex.value]); // 到达最后一行时回到第一行            
        }
    } else if (event.keyCode === 38) { // 向上箭头
        if (RCIndex.value > 0) {
            RCIndex.value--;
            setRCCurrent(RCselectData[RCIndex.value]);
        } else {
            RCIndex.value = RCselectData.length - 1;
            setRCCurrent(RCselectData[RCIndex.value]); // 到达第一行时回到最后一行
        }
    } else if (event.keyCode === 13) { // 回车键
        RCVisible.value = false
    }
}