添加真实分页和前端分页

src/components/input-table-query/InputAndTable.vue

@@ -6,7 +6,8 @@
               :style="{width: inputWidth + 'px'}"
               @clear="inputClear"
               @focus="initData"
-              @input="inputChange"/>
+              @input="inputChange"
+              @keydown="keyboardEvent"/>
     <transition name="el-zoom-in-top">
       <div v-show="inputTable" :style="{width: props.tableWidth + 'px'}" class="input_box">
         <div class="input_header">
@@ -25,10 +26,11 @@
       </span>
         </div>
         <div class="input_table">
-          <el-table :data="props.data.data"
-                    :height="410"
-                    :row-class-name="tableRowClassName"
-                    @row-click="rowClick">
+          <el-table
+              :data="props.realPagination ? props.data.data : props.data.data.slice((props.data.currentPage - 1) * 10, props.data.currentPage * 10)"
+              :height="410"
+              :row-class-name="tableRowClassName"
+              @row-click="rowClick">
             <el-table-column :width="30" type="index"/>
             <template v-for="item in props.tableHeader">
               <el-table-column :label="item.label" :prop="item.prop"
@@ -86,13 +88,16 @@ const props = defineProps({
   clearable: {
     type: Boolean,
     default: false
+  },
+  realPagination: {
+    type: Boolean,
+    default: true
   }
 })
 
 const emit = defineEmits(['currentChange', 'rowClick', 'fetchData', 'update:modelValue'])
 
 let inputData = $ref('')
-let elPage = $ref(null)
 let tempElInput = $ref(null)
 let popover = $ref(false)
 let inputTable = $ref(false)
@@ -119,7 +124,7 @@ const initData = () => {
     inputChange(props.modelValue)
   }
   inputTable = true
-  keyboardEvent()
+  // keyboardEvent()
 }
 
 const rowClick = (row, column, event) => {
@@ -128,13 +133,16 @@ const rowClick = (row, column, event) => {
   inputData = row[props.valueId]
   emit('rowClick', row)
   inputTable = false
-  document.onkeydown = null
 }
 
 const currentChange = (val) => {
   tempElInput.focus()
   tempIndex = -1
-  emit('currentChange', inputData, val)
+  if (props.realPagination) {
+    emit('currentChange', inputData, val);
+  } else {
+    props.data.currentPage = val
+  }
 }
 
 const tableRowClassName = ({row, rowIndex}) => {
@@ -158,10 +166,8 @@ const inputClose = () => {
   inputTable = false
   tempIndex = -1
   inputData = props.modelValue
-  document.onkeydown = null
 }
 
-
 const enter = () => {
   if (tempIndex < 0 || tempIndex > props.data.data.length) return
   rowClick(props.data.data[tempIndex])
@@ -189,31 +195,34 @@ const upOrLower = (val) => {
   }
 }
 
-const keyboardEvent = () => {
-  document.onkeydown = function (event) {
-    if (props.data.total > 0) {
-      if (event.altKey && event.keyCode === 37) {
-        event.returnValue = false
-        leftOrRight('left')
-      } else if (event.altKey && event.keyCode === 38) {
-        event.returnValue = false
-        upOrLower('up')
-      } else if (event.altKey && event.keyCode === 39) {
-        event.returnValue = false
-        leftOrRight('right')
-      } else if (event.altKey && event.keyCode === 40) {
-        event.returnValue = false
-        upOrLower('lower')
-      } else if (event.keyCode === 13) {
-        enter();
-      } else if (event.key === 'Escape') {
-        event.returnValue = false
-        inputClose()
-      }
+const keyboardEvent = (event) => {
+  if (event.key === 'Escape') {
+    event.returnValue = false
+    inputClose()
+  }
+  if (props.data.total > 0) {
+    if (event.altKey && event.keyCode === 37) {
+      event.returnValue = false
+      leftOrRight('left')
+    } else if (event.altKey && event.keyCode === 38) {
+      event.returnValue = false
+      upOrLower('up')
+    } else if (event.altKey && event.keyCode === 39) {
+      event.returnValue = false
+      leftOrRight('right')
+    } else if (event.altKey && event.keyCode === 40) {
+      event.returnValue = false
+      upOrLower('lower')
+    } else if (event.keyCode === 13) {
+      enter();
     }
   }
 }
 
+const focus = () => {
+  tempElInput.focus()
+}
+
 watch(() => props.modelValue, () => {
   inputData = props.modelValue
 })
@@ -222,6 +231,8 @@ onMounted(() => {
   inputData = props.modelValue
 })
 
+defineExpose({focus})
+
 </script>
 
 <style>