learning-system-portal/src/components/Course/choice.vue

<template>
  <div class="choice"> 
    <el-tag type="info" 
        closable  
        v-for="(item,index) in teacherValueList" 
        :key="item.teacherId" 
        @close="handleClose(item,index)">{{item.teacherName}}</el-tag>
        <el-input
          placeholder="请输入授课教师姓名"
          v-model="teacherValues"
          clearable>
          <el-button :loading="loading" slot="append" icon="el-icon-search" @click="remoteFindTeacher()"></el-button>
        </el-input>
        <div class="choice-box" v-if="teacherDownList.length>0">
           <ul>
            <li v-for="te in teacherDownList" :key="te.key" @click="changeTeachers(te)">{{te.teacherName + '(' + te.teacherCode + ')'}}</li>
           </ul>
        </div>
     <!-- <el-select
        style="width: 100%;"
        v-model="teacherValues"
        filterable
        remote
        clearable 
        value-key="teacherId"
        ref="elSelect"
        reserve-keyword
        placeholder="请输入授课教师姓名"
        @change="changeTeachers"
        :remote-method="remoteFindTeacher"
        :loading="loading">
        <el-option v-for="item in teacherDownList" :key="item.teacherId" :label="item.teacherName + item.teacherCode" :value="item"></el-option>
    </el-select> -->
  </div>
</template>

<script>
  import { mapGetters } from 'vuex';
  import apiTeacher from '../../api/modules/teacher.js';
  export default{
    name:  'choice',
    computed: {
      ...mapGetters(['userInfo'])
    },
    props: {
      teacherValue:{
        type:Array,
      },
    },
    data(){
      return {
        teacherValueList:[],
        teacherValues:'',
        loading:false,
        teacherDownList:[],
      }
    },
    watch:{
      teacherValue(val) {
       this.teacherValueList = val;
      }
    },
    mounted(){
    },
    methods:{
        handleClose(item,index){
          this.teacherValueList.splice(index, 1);
          this.$emit('getTeacherList',this.teacherValueList);
        },
        changeTeachers(t) {
            if(t) {
            let isCan = this.teacherValueList.some(it=>it.teacherId == t.teacherId);
            if(isCan){
                this.teacherValues = '';
                this.teacherDownList = [];
                this.$message.warning('教师重复，请重新选择！')
                return;
            }
            this.teacherValueList.push(t);
            this.teacherDownList = [];
            this.teacherValues = '';
            this.$emit('getTeacherList',this.teacherValueList);
            }
        },
            // 教师列标，远程查询
        async remoteFindTeacher() {
          console.log("2222");
          if (this.teacherValues !== '') {
            this.loading = true;
            try {
            const { data, message, code } = await apiTeacher.findByNameNew(this.teacherValues);
            this.loading = false;
            if (code === 200) {
                let list = [];
                data.forEach(item => {
                list.push({
                    teacherId: item.id,
                    teacherName: item.name,
                    teacherCode: item.mobile
                });
                });
                this.teacherDownList = list;
            } else {
                this.$message.error('查询教师信息失败:' + message);
            }
            } catch (err) {
            this.loading = false;
            }
        } else {
            this.teacherDownList = [];
        }
      },
    }

  }
</script>
<style lang="scss">
.choice{
  position: relative;
   .el-tag--info{
     height: 22px;
     line-height: 22px;
   } 
   .choice-box{
    position: absolute;
    // top: 40px;
    width: 280px;
    z-index: 999;
    background: #fff;
    border-radius: 4px;
    border: 1px solid #eee;
    box-shadow: 3px 3px 3px 3px #eee;
    ul{
      margin: 0;
      padding:0 10px;
    }
     li{
      list-style: none;
     }
   }
}
</style>