v-for,el-select新增编辑远程搜索

//el-select中
只有filterable一个属性是本地搜索   
remote和:filter-method 是远程搜索
数据量小的时候推荐本地搜索，数据量大推荐远程搜索



<el-form-item label="股票代码:" prop='' required>
        <span v-for="(v,index) in articleForm.article_code" :key="index">
          <el-select
            size='mini'
            style="width:150px;"
            v-model="v.stock_code_msg"
            maxlength='6'
            @change="stock_change($event,index)"
            placeholder="请选择"
            filterable
            remote
            :filter-method="(query) => remoteMethod(query,v)"
            :loading="loading"
            >
            <el-option
                v-for="(item,idx) in v.matchList"
                :key="idx"
                :label="item.Code + '(' +item.Name + ')'"
                :value="item.Fcode">
            </el-option>
          </el-select>
          <el-button type="danger" icon="el-icon-delete" circle @click="delete_stock(index, v)" style="margin-right:10px;"></el-button>
        </span>
        <el-button @click="add_stock" type="primary">添加股票</el-button>
      </el-form-item>



        article_code:[{
          'stock_name':'',
          'stock_code':'',
          'stock_code_msg':'',
            matchList:[]
        }]


    stock_change(event,index){ 
     //event是$event.target.value，当前元素的最新值。

      let id = this.articleForm.article_code[index].id
      if (id) {
        console.log('id',id);
        this.edit_article_code.forEach(v=>{
          if (id == v.id) {
            v.is_del = 1
          }
        })
      }

      delete this.articleForm.article_code[index].id

      this.articleForm.article_code[index].stock_code =this.articleForm.article_code[index].stock_code_msg.substring(2)
      this.getStockName(event,index);
    },

//远程搜索，第一个参数固定是query，筛选的值
    remoteMethod(query,v) {   //筛选匹配的股票
      if (query !== '') {
        this.loading = true;
          this.loading = false;
          v.matchList = this.allList.filter((item,idx) => {
            return item.Code.indexOf(query) > -1;
          });
      } else {
        v.matchList = [];
      }
    },


    delete_stock(index, v){
      if (this.articleForm.article_code.length == 1) {
         this.$message.warning("至少选择一个股票代码");
         return
      }
        //给删除的股票添加is_del:1的属性值
      let id = this.articleForm.article_code[index].id
      if (id) {
        this.edit_article_code.forEach(v=>{
          if (id == v.id) {
            v.is_del = 1
          }
        })
      }
       //因为el-option的matchList筛选值改变后vue没有更新el-option label视图，
       //所以直接把article_code清空重新赋值更新视图
      const as= JSON.parse(JSON.stringify(this.articleForm.article_code))
      this.articleForm.article_code  = []
     this.$nextTick(() => {
       this.articleForm.article_code = as.filter(its => its.stock_code_msg !== v.stock_code_msg)
     })
    },

    add_stock(){
      if (this.articleForm.article_code.length > 9) {
         return this.$message.warning("最多选择10个股票代码");
      }
      this.articleForm.article_code.push({
          'stock_name':'',
          'stock_code':'',
          'stock_code_msg':'',
          matchList:[]
      })
    },

//编辑股票 matchList远程筛选股票数据回显
          this.articleForm = res.data;
          let arr = []
          this.articleForm.article_code.forEach(v =>{
              v.matchList = [
                {
                Code:v.stock_code,
                Fcode:v.stock_code_msg,
                Name:v.stock_name
              }
              ]
          })

远程搜索+下拉框分页+关闭下拉重新请求

//el-select下拉自定义指令
import Vue from 'vue'
let MyDirective = {}
export default MyDirective.install = function(vue, options) {
  Vue.directive('loadmore', {
    bind (el, binding) {
      const selectDom = el.querySelector('.el-select-dropdown .el-select-dropdown__wrap')
      selectDom.addEventListener('scroll', function () {
        const isEnd = this.scrollHeight - this.scrollTop <= this.clientHeight
        if (isEnd) {
          binding.value()
        }
      })
    }
  })
}
main.js
import directives from './directives'
// 全局注册指令
Vue.use(directives)


<el-select
  v-model="dialogForm.related_courses"
  filterable
  placeholder="请输入/请选择商品名称"
  remote
  :remote-method="remoteMethod"
  :loading="loading92"
  v-loadmore="loadingMoreFunc"
  @visible-change="templateTagChange"
  style="width: 400px"
>
  <el-option v-for="item in dcCourseTable" :key="item.course_id" :label="item.name" :value="item.course_id"></el-option>
</el-select>


remoteMethod(query) {
  if (query !== '') {
    this.loading92 = true
    setTimeout(() => {
      this.loading92 = false
      this.dcCourseEvt(query)
    }, 200)
  } else {
    this.options = []
  }
},

async dcCourseEvt(v) {
  const dc_course = await curriculum.dcCourseList({
    curpage: this.dcCourseEvtPage.curpage,
    pagesize: this.dcCourseEvtPage.pagesize,
    name: v
  })
  if (dc_course.code === 1) {
    if (v) {
      this.dcCourseTable = dc_course.data.list
    } else {
      this.dcCourseTable = [...this.dcCourseTable, ...dc_course.data.list]
    }
  } else {
    this.$message.error(dc_course.message)
  }
  console.log(' dcCourseEvt :', dc_course)
},

async loadingMoreFunc() {
  const AS = new AntiShake(800)
  await AS.debounce()
  this.dcCourseEvtPage.curpage += 1
  this.dcCourseEvt()
},
templateTagChange(val) {
  const aa = this.dialogForm.related_courses
  if (!val) {
    this.dcCourseTable = []
    this.dcCourseEvtPage = { curpage: 1, pagesize: 20 }
    this.dcCourseEvt()
    this.dialogForm.related_courses = aa
  }
},

点击el-option获取行数据

<el-select v-model="dialogForm.related_courses" filterable placeholder="请输入/选择小鹅通直播" style="width: 400px">
  <el-option
    v-for="item in selectXETZB"
    :key="item.live_id"
    @click.native="getZBInfo(item)" 
    :label="item.title"
    :value="item.live_id"
  ></el-option>
</el-select>

getZBInfo(row){ //收集值
  this.dialogForm.status = row.alive_state
  this.dialogForm.live_time = row.alive_start_at
  this.dialogForm.live_url = row.page_url
},