问答虚拟列表

package-lock.json

@@ -34,7 +34,8 @@
         "vue-router": "^3.5.1",
         "vue-smooth-dnd": "^0.8.1",
         "vuedraggable": "^2.24.3",
-        "vuex": "^3.6.2"
+        "vuex": "^3.6.2",
+        "vxe-table": "^3.15.2"
       },
       "devDependencies": {
         "@babel/core": "^7.12.16",
@@ -3124,6 +3125,18 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@vxe-ui/core": {
+      "version": "3.0.35",
+      "resolved": "https://registry.npmmirror.com/@vxe-ui/core/-/core-3.0.35.tgz",
+      "integrity": "sha512-VchWQFIXUdiz4WMg318XOwJZ02FJ2wrcwlE1gfZfJO6qdaQ4eVGGjh5/ZiIN1CNBTnIKFjsD6KE+Cu6XKS1A/g==",
+      "dependencies": {
+        "dom-zindex": "^1.0.6",
+        "xe-utils": "^3.7.4"
+      },
+      "peerDependencies": {
+        "vue": "^2.6.0"
+      }
+    },
     "node_modules/@webassemblyjs/ast": {
       "version": "1.11.1",
       "resolved": "https://registry.npmmirror.com/@webassemblyjs/ast/-/ast-1.11.1.tgz",
@@ -5511,6 +5524,11 @@
         "url": "https://github.com/cheeriojs/dom-serializer?sponsor=1"
       }
     },
+    "node_modules/dom-zindex": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmmirror.com/dom-zindex/-/dom-zindex-1.0.6.tgz",
+      "integrity": "sha512-FKWIhiU96bi3xpP9ewRMgANsoVmMUBnMnmpCT6dPMZOunVYJQmJhSRruoI0XSPoHeIif3kyEuiHbFrOJwEJaEA=="
+    },
     "node_modules/domain-browser": {
       "version": "4.22.0",
       "resolved": "https://registry.npmjs.org/domain-browser/-/domain-browser-4.22.0.tgz",
@@ -12461,6 +12479,22 @@
         "vue": "^2.0.0"
       }
     },
+    "node_modules/vxe-pc-ui": {
+      "version": "3.5.22",
+      "resolved": "https://registry.npmmirror.com/vxe-pc-ui/-/vxe-pc-ui-3.5.22.tgz",
+      "integrity": "sha512-nEiYFtuVDxus+75LKzLy8MOiueEOjaIthutLSIVn8o7BYfp2Wf1EdCfLsqcaBuD4YinTuESyZ7Tz7YEcCfjj6w==",
+      "dependencies": {
+        "@vxe-ui/core": "^3.0.35"
+      }
+    },
+    "node_modules/vxe-table": {
+      "version": "3.15.2",
+      "resolved": "https://registry.npmmirror.com/vxe-table/-/vxe-table-3.15.2.tgz",
+      "integrity": "sha512-oeOw10xU33o+lys4OY9P06xTcgnG/Q9V+St/OfNWipA1nhxVwVf8cSicvcop8i4zgoHemLgdbu42kdcTwe6m6w==",
+      "dependencies": {
+        "vxe-pc-ui": "^3.5.22"
+      }
+    },
     "node_modules/watch-size": {
       "version": "2.0.0",
       "resolved": "https://registry.npmmirror.com/watch-size/-/watch-size-2.0.0.tgz",
@@ -13034,6 +13068,11 @@
         }
       }
     },
+    "node_modules/xe-utils": {
+      "version": "3.7.4",
+      "resolved": "https://registry.npmmirror.com/xe-utils/-/xe-utils-3.7.4.tgz",
+      "integrity": "sha512-9yuCHLOU+og4OEkPWWtzrYk1Zt1hgN66U/NCJ0+vYJSx1MplBtoQRz8aEA+2RmCr3leLru98vQxNpw/vJsu/sg=="
+    },
     "node_modules/xtend": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz",
@@ -15332,6 +15371,15 @@
       "integrity": "sha512-Iu8Tbg3f+emIIMmI2ycSI8QcEuAUgPTgHwesDU1eKMLE4YC/c/sFbGc70QgMq31ijRftV0R7vCm9co6rldCeOA==",
       "dev": true
     },
+    "@vxe-ui/core": {
+      "version": "3.0.35",
+      "resolved": "https://registry.npmmirror.com/@vxe-ui/core/-/core-3.0.35.tgz",
+      "integrity": "sha512-VchWQFIXUdiz4WMg318XOwJZ02FJ2wrcwlE1gfZfJO6qdaQ4eVGGjh5/ZiIN1CNBTnIKFjsD6KE+Cu6XKS1A/g==",
+      "requires": {
+        "dom-zindex": "^1.0.6",
+        "xe-utils": "^3.7.4"
+      }
+    },
     "@webassemblyjs/ast": {
       "version": "1.11.1",
       "resolved": "https://registry.npmmirror.com/@webassemblyjs/ast/-/ast-1.11.1.tgz",
@@ -17062,6 +17110,11 @@
         "entities": "^2.0.0"
       }
     },
+    "dom-zindex": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmmirror.com/dom-zindex/-/dom-zindex-1.0.6.tgz",
+      "integrity": "sha512-FKWIhiU96bi3xpP9ewRMgANsoVmMUBnMnmpCT6dPMZOunVYJQmJhSRruoI0XSPoHeIif3kyEuiHbFrOJwEJaEA=="
+    },
     "domain-browser": {
       "version": "4.22.0",
       "resolved": "https://registry.npmjs.org/domain-browser/-/domain-browser-4.22.0.tgz",
@@ -21925,6 +21978,22 @@
       "integrity": "sha512-ETW44IqCgBpVomy520DT5jf8n0zoCac+sxWnn+hMe/CzaSejb/eVw2YToiXYX+Ex/AuHHia28vWTq4goAexFbw==",
       "requires": {}
     },
+    "vxe-pc-ui": {
+      "version": "3.5.22",
+      "resolved": "https://registry.npmmirror.com/vxe-pc-ui/-/vxe-pc-ui-3.5.22.tgz",
+      "integrity": "sha512-nEiYFtuVDxus+75LKzLy8MOiueEOjaIthutLSIVn8o7BYfp2Wf1EdCfLsqcaBuD4YinTuESyZ7Tz7YEcCfjj6w==",
+      "requires": {
+        "@vxe-ui/core": "^3.0.35"
+      }
+    },
+    "vxe-table": {
+      "version": "3.15.2",
+      "resolved": "https://registry.npmmirror.com/vxe-table/-/vxe-table-3.15.2.tgz",
+      "integrity": "sha512-oeOw10xU33o+lys4OY9P06xTcgnG/Q9V+St/OfNWipA1nhxVwVf8cSicvcop8i4zgoHemLgdbu42kdcTwe6m6w==",
+      "requires": {
+        "vxe-pc-ui": "^3.5.22"
+      }
+    },
     "watch-size": {
       "version": "2.0.0",
       "resolved": "https://registry.npmmirror.com/watch-size/-/watch-size-2.0.0.tgz",
@@ -22310,6 +22379,11 @@
       "dev": true,
       "requires": {}
     },
+    "xe-utils": {
+      "version": "3.7.4",
+      "resolved": "https://registry.npmmirror.com/xe-utils/-/xe-utils-3.7.4.tgz",
+      "integrity": "sha512-9yuCHLOU+og4OEkPWWtzrYk1Zt1hgN66U/NCJ0+vYJSx1MplBtoQRz8aEA+2RmCr3leLru98vQxNpw/vJsu/sg=="
+    },
     "xtend": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz",

package.json

@@ -34,7 +34,8 @@
     "vue-router": "^3.5.1",
     "vue-smooth-dnd": "^0.8.1",
     "vuedraggable": "^2.24.3",
-    "vuex": "^3.6.2"
+    "vuex": "^3.6.2",
+    "vxe-table": "^3.15.2"
   },
   "devDependencies": {
     "@babel/core": "^7.12.16",

src/main.js

@@ -12,6 +12,8 @@ import '@/assets/font/iconfont.css'
 import './pemission'
 import { resolveBlob } from '@/utils'
 import * as $enumData from '@/views/als/utils/enum-data'
+import VxeUITable from 'vxe-table'
+import 'vxe-table/lib/style.css'
 
 // 全局设置消息框 点击屏幕外部不能关闭
 ElementUI.MessageBox.setDefaults({ closeOnClickModal: false })
@@ -49,6 +51,7 @@ Vue.prototype.popupduration = popupduration
 Vue.use(ElementUI)
 Vue.use(dataV)
 Vue.use($enumData)
+Vue.use(VxeUITable)
 
 new Vue({
   router,

src/views/als/intelligentQA/index.vue

@@ -53,9 +53,12 @@
               <div class="answerData" v-if="item.sqlAnswer">
                 <h2>数据库</h2>
                 <div class="answer">
-                  <el-table :data="item.sqlAnswer" style="width: 100%; height: 250px; overflow: scroll">
+                  <!-- <el-table :data="item.sqlAnswer" style="width: 100%; height: 250px; overflow: scroll">
                     <el-table-column v-for="item in sqlAnswerKey" :prop="item" :key="item" :label="item" align="center"> </el-table-column>
-                  </el-table>
+                  </el-table> -->
+                  <vxe-table :data="item.sqlAnswer">
+                    <vxe-column v-for="item in sqlAnswerKey" :field="item" :title="item" :key="item" align="center"></vxe-column>
+                  </vxe-table>
                 </div>
               </div>
             </div>