ui调整

src/components/NameFilterSelect/index.vue

@@ -1,8 +1,10 @@
 <template>
   <div id="NameFilterSelect">
-    <el-select @clear="handleClose" style="width:100%" @change="handleChange" clearable multiple v-model="aids"
-      filterable placeholder="姓名" v-limit-input="50" remote reserve-keyword :remote-method="initNameList"
-      :multiple-limit="5" :loading="nameListLoading">
+    <el-select ref="selectRef" :max-collapse-tag="2" @visible-change="handleChangeBlur" @focus="collapseTags = false"
+      :collapse-tags="collapseTags" @clear="handleClose" class="no-wrap-select" style="width:100%"
+      @change="handleChange" clearable multiple v-model="aids" filterable placeholder="姓名" v-limit-input="50" remote
+      :no-data-text="keyword && keyword.length > 1 ? '无数据': '至少输入两个字'" :remote-method="initNameList" :multiple-limit="5"
+      :loading="nameListLoading">
       <el-option v-for="item in nameList" :key="item.userId" :label="item.name" :value="item.userId">
         <span>{{ item.name }}</span>
         <span v-if="item.code" class="option-code">（{{ item.code }}）</span>
@@ -19,6 +21,8 @@ export default {
       aids: [],
       nameListLoading: false,
       nameList: [],
+      keyword: "",
+      collapseTags: true,
     };
   },
   props: {},
@@ -26,9 +30,22 @@ export default {
     handleChange() {
       console.log("handleChange", this.aids);
       this.$emit("handleNameChange", this.aids);
+      this.$nextTick(() => {
+        this.nameList = [];
+      });
+    },
+    handleChangeBlur(flag) {
+      const selectEl = this.$refs.selectRef.$el;
+      const input = selectEl.getElementsByClassName("el-input__inner")[0];
+      console.log(input, "input");
+      input.style.height = "auto";
+      // 失焦时展示+N模式
+      if (!flag) {
+        this.collapseTags = true;
+      }
     },
     handleClose() {
-      this.$set(this, 'nameList', [])
+      this.$set(this, "nameList", []);
       console.log("handleClose", this.aids);
       this.$emit("handleClose");
     },
@@ -37,8 +54,10 @@ export default {
       this.nameList = [];
     },
     async initNameList(keyword) {
+      // this.collapseTags = false
+      this.keyword = keyword;
       console.log("initNameList", keyword);
-      if (!keyword) {
+      if (!keyword || keyword.length < 2) {
         return;
       }
       this.nameListLoading = true;
@@ -73,7 +92,6 @@ export default {
   watch: {},
 };
 </script>
-
 <style scoped lang="scss">
 ::v-deep .el-upload-dragger {
   width: 100% !important;

src/utils/tools.js

@@ -121,7 +121,7 @@ export function toContentType(fileType) {
 // }
 export function courseType(type) {
     const maps = {
-        10: '录播课',
+        10: '微课',
         21: '在线课(直播)',
         20: '录播课',
         30: '线下课',

src/views/course/CourseManage.vue

@@ -14,7 +14,7 @@
     </div>
     <!-- <div style="color: red;">下面的表格标题及内容需要调整完善</div> -->
     <div>
-      <el-tabs style="width: 100%;" v-model="tabName" >
+      <el-tabs style="width: 100%;" type="border-card" v-model="tabName" >
         <el-tab-pane label="报名记录" name="second">
           <el-row style="margin: 20px 0;" :gutter="20">
             <el-col :span="4">