table 中的select 组件可以用作循环

父组件

<ProductStockSelect 
ref="productStockSelect" 
v-model="scope.row.stockVal" 
:product-code="scope.row.salesSubItemCode" >
</ProductStockSelect>

子组件

<template>
  
  <el-select v-model="selected" placeholder="请选择" :loading="loading"
             @change="onChange"
             @visible-change="onVisibleChange"
             value-key="id"
             filterable clearable ref="select">
    <el-option v-for="item in options" :key="item.id" :label="item.storehouseName" :value="item"
               style="height: 80px">
      <div>{{ item.storehouseName }}</div>
      <span class="options_item">库存数量：{{ item.stockNumber }} {{value.productCategoryName}}</span>
      <span class="options_item">库存批次：{{ item.batchNo }}</span>
    </el-option>
  </el-select>
</template>

<script>

import stockApi from "../../service/api/stock-api";

export default {
  props: ["productId", "value", "productCode"],

  model: {
    prop: "value",
    event: 'change',
  },

  data() {
    return {
      loading: false,
      options: [],
      selected: this.value,
    }
  },
  created(){
    // if (this.productCode) {
    //   this.load()
    // }
  },
  watch: {
    productId(newValue, oldValue) {
      this.options = []
    },

    productCode(newValue, oldValue) {
      this.options = []
    },
    value(newValue,oldValue){
      console.log(oldValue)
      console.log(newValue)
      // newValue,绑定的对象。
      // 根据对象 id获取options、
     // 根据id设置selected
    }
  },

  mounted(){
    if(this.value&&this.value.id&&this.value.id!=='0'){
      this.load()
    }
  },

  methods: {
    onChange() {
      this.$emit('change', this.selected);
    },
    


    onVisibleChange(visible) {
      if (visible && this.options.length === 0) {
        this.load();
      }
    },

    clear() {
      this.selected = '';
    },

    load() {
      if (this.productId) {
        this.loading = true;
        stockApi.listByProductIds([this.productId]).then(value => {
          this.options = value;
        }).finally(() => {
          this.loading = false;
        });
      } else if (this.productCode) {
        this.loading = true;
        stockApi.listByProductCodes([this.productCode]).then(value => {
          this.options = value;
        }).finally(() => {
          this.loading = false;
        });
      }
    },
  }
}
</script>

<style scoped lang="less">
.options_item {
  display: block !important;
  color: #8492a6;
  font-size: 13px;
  line-height: 22px !important;
}
</style>