search autocomplete

package.json

@@ -1,74 +1,76 @@
 {
-    "name": "admin",
-    "version": "0.1.0",
-    "private": true,
-    "scripts": {
-        "serve": "vue-cli-service serve --open",
-        "build": "vue-cli-service build",
-        "lint": "vue-cli-service lint"
+  "name": "admin",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "serve": "vue-cli-service serve --open",
+    "build": "vue-cli-service build",
+    "lint": "vue-cli-service lint"
+  },
+  "dependencies": {
+    "@vue/cli-shared-utils": "^5.0.8",
+    "ali-oss": "^6.2.1",
+    "ansi-styles": "^6.2.1",
+    "cos-js-sdk-v5": "^0.5.20",
+    "echarts": "^4.9.0",
+    "element-ui": "^2.7.2",
+    "font-awesome": "^4.7.0",
+    "js-base64": "^2.5.2",
+    "qrcode.vue": "^1.7.0",
+    "url-search-params-polyfill": "^8.0.0",
+    "vue": "^2.6.6",
+    "vue-baidu-map": "^0.21.22",
+    "vue-full-calendar": "^2.8.1-0",
+    "vue-fullcalendar": "^1.0.9",
+    "vue-router": "^3.0.1",
+    "vue-ueditor-wrap": "^2.5.6",
+    "vue-wordcloud": "^1.1.1",
+    "vuedraggable": "^2.24.3",
+    "vuex": "^3.0.1",
+    "wangeditor": "^3.1.1"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.1.0",
+    "@babel/plugin-proposal-object-rest-spread": "^7.0.0",
+    "@babel/plugin-transform-runtime": "^7.1.0",
+    "@babel/preset-env": "^7.1.0",
+    "@babel/preset-react": "^7.0.0",
+    "@vue/cli-plugin-babel": "^3.5.0",
+    "@vue/cli-plugin-eslint": "^3.5.0",
+    "@vue/cli-service": "^3.5.0",
+    "axios": "^0.18.0",
+    "babel-loader": "^8.0.2",
+    "babel-polyfill": "^6.26.0",
+    "es6-promise": "^4.2.8",
+    "eslint": "^5.8.0",
+    "eslint-plugin-vue": "^5.0.0",
+    "node-sass": "^4.11.0",
+    "sass-loader": "^7.1.0",
+    "vue-cropper": "^0.4.9",
+    "vue-template-compiler": "^2.5.21"
+  },
+  "eslintConfig": {
+    "root": true,
+    "env": {
+      "node": true
     },
-    "dependencies": {
-        "ali-oss": "^6.2.1",
-        "cos-js-sdk-v5": "^0.5.20",
-        "echarts": "^4.9.0",
-        "element-ui": "^2.7.2",
-        "font-awesome": "^4.7.0",
-        "js-base64": "^2.5.2",
-        "qrcode.vue": "^1.7.0",
-        "url-search-params-polyfill": "^8.0.0",
-        "vue": "^2.6.6",
-        "vue-baidu-map": "^0.21.22",
-        "vue-full-calendar": "^2.8.1-0",
-        "vue-fullcalendar": "^1.0.9",
-        "vue-router": "^3.0.1",
-        "vue-ueditor-wrap": "^2.5.6",
-        "vue-wordcloud": "^1.1.1",
-        "vuedraggable": "^2.24.3",
-        "vuex": "^3.0.1",
-        "wangeditor": "^3.1.1"
-    },
-    "devDependencies": {
-        "@babel/core": "^7.1.0",
-        "@babel/plugin-proposal-object-rest-spread": "^7.0.0",
-        "@babel/plugin-transform-runtime": "^7.1.0",
-        "@babel/preset-env": "^7.1.0",
-        "@babel/preset-react": "^7.0.0",
-        "@vue/cli-plugin-babel": "^3.5.0",
-        "@vue/cli-plugin-eslint": "^3.5.0",
-        "@vue/cli-service": "^3.5.0",
-        "axios": "^0.18.0",
-        "babel-loader": "^8.0.2",
-        "babel-polyfill": "^6.26.0",
-        "es6-promise": "^4.2.8",
-        "eslint": "^5.8.0",
-        "eslint-plugin-vue": "^5.0.0",
-        "node-sass": "^4.11.0",
-        "sass-loader": "^7.1.0",
-        "vue-cropper": "^0.4.9",
-        "vue-template-compiler": "^2.5.21"
-    },
-    "eslintConfig": {
-        "root": true,
-        "env": {
-            "node": true
-        },
-        "extends": [
-            "plugin:vue/essential",
-            "eslint:recommended"
-        ],
-        "rules": {},
-        "parserOptions": {
-            "parser": "babel-eslint"
-        }
-    },
-    "postcss": {
-        "plugins": {
-            "autoprefixer": {}
-        }
-    },
-    "browserslist": [
-        "> 1%",
-        "last 2 versions",
-        "not ie <= 8"
-    ]
+    "extends": [
+      "plugin:vue/essential",
+      "eslint:recommended"
+    ],
+    "rules": {},
+    "parserOptions": {
+      "parser": "babel-eslint"
+    }
+  },
+  "postcss": {
+    "plugins": {
+      "autoprefixer": {}
+    }
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions",
+    "not ie <= 8"
+  ]
 }

src/views/data/index.vue

@@ -169,7 +169,7 @@
                         </el-select>
                 </el-form-item>
                 <el-form-item label="参赛选手" prop="player_id">
-                    <el-select filterable v-model="form.player_id" placeholder="请选择用户代码">
+                    <el-select filterable remote v-model="form.player_id" placeholder="请选择用户代码" reserve-keyword :remote-method="remoteMethod" :loading="loading">
                         <el-option v-for="item in playerList" :key='item.id' :label="item.label" :value="item.id"></el-option>
                     </el-select>
                 </el-form-item>
@@ -450,6 +450,18 @@ export default {
             console.log(res)
             this.form.today_stock_img.push(res.data.url);
         },
+        remoteMethod(query){
+            if (query !== '') {
+                this.loading = true;
+                this.$api.getPlayerList({usercode:query}).then(res=>{
+                    this.playerList=res.data.data
+                    this.$set(this.playerList,res.data.data)
+                    this.loading = false;
+                })
+            } else {
+                this.playerList = [];
+            }
+        },
         /** 提交按钮 */
         submitForm() {
             console.log(this.form)