自定义下拉框

想要知道数据变化，监听（watch） ，本来就提供的方法eg ref组件

<el-table-column
                  label="商品编码"
                  width="200"
                >
                  <template slot-scope="{ row,$index }">
                    <!-- <div v-if="row.isSkuSHow">
                      <p>
                        {{ row.sku }}
                      </p>
                      <p>
                        {{ row.barcode }}
                      </p>
                    </div> -->
                    <div>
                      <el-select
                        :ref="`searchSelect${$index}`"
                        v-model.trim="row.sku"
                        class="select-style"
                        placeholder="请输入搜索商品编码"
                        :popper-append-to-body="true"
                        popper-class="option"
                        filterable
                        clearable
                        @clear="clearRow(row,$index)"
                        @input.native="filterList($event,$index)"
                        @focus="currentIndex = $index"
                        @visible-change="show(row,$index)"
                      >
                        <el-option value="1" hidden />
                        <div slot="empty" style="display:none" />
                        <div class="companyType">
                          <div class="type-item">
                            <el-table
                              :data="tableSkuData"
                              style="width: 260px;"
                              height="220"
                            >
                              <el-table-column
                                prop="name"
                                label="商品名称/SKU"
                              >
                                <template slot-scope="scopeChild ">
                                  <div class="cup" @click="rowClick(scopeChild.row)">
                                    <p>{{ scopeChild.row.title }}</p>
                                    <p>{{ scopeChild.row.sku }}</p>
                                  </div>
                                </template>
                              </el-table-column>
                            </el-table>
                          </div>
                        </div>
                      </el-select>
                    </div>
                  </template>
                </el-table-column>
                
                
                
                clearRow(row, index) {
      this.tableData[index].sku = ''
      this.tableData[index].barcode = ''
      this.tableData[index].title = ''
    },
    show(row, index) {
      skupublicindex(
        {
          sku: '',
          typeGoods: 1
        }
      ).then(res => {
        this.tableSkuData = res.data.list
      })
    },
    filterList(row, index) {
    // 通过ref找改动的数据
      const str = this.$refs[`searchSelect${index}`].selectedLabel
      skupublicindex(
        {
          sku: str,
          typeGoods: 1
        }
      ).then(res => {
        this.tableSkuData = res.data.list
      })
    },
    // 新增一行商品信息
    rowClick(row) {
      if (typeof this.tableData[this.currentIndex].num == 'undefined') {
        this.tableData.splice(this.currentIndex, 1, {
          goodsId: row.id,
          num: '',
          title: row.title,
          sku: row.sku,
          barcode: row.barcode,
          price: '',
          taxRate: '0',
          remark: '',
          isSkuSHow: true
        })
      } else {
        this.tableData[this.currentIndex].goodsId = row.id
        this.tableData[this.currentIndex].title = row.title
        this.tableData[this.currentIndex].sku = row.sku
        this.tableData[this.currentIndex].barcode = row.barcode
      }
    },
    addGoods() {
      this.$refs.formInlineRef.validate((valid) => {
        if (valid) {
          this.tableData.push({ sku: '', isSkuSHow: false })
          // this.tableData.forEach(e => {
          //   e.isSkuSHow = e.hasOwnProperty('goodsId')
          // })
        }
      })
    },
    
    
    .select-style ::v-deep  .el-input .el-input__suffix .el-input__suffix-inner .el-icon-arrow-up{
  opacity: 0 !important;
}

.companyType {
  // width: 300px;
  // height: 250px;
  overflow: auto;
  padding: 5px 10px;
  background: #FFFFFF;

  .type-item {
    &:hover {
      background: #EBF3FF;
    }

    ::v-deep .el-table__header {
   .el-table__cell {
     color: #666;
     background-color: #FEEACC !important;
   }
 }
  }

  .input {
    margin-bottom: 10px;

    ::v-deep {
      .el-input__inner {
        border-top: 0;
        border-left: 0;
        border-right: 0;
        border-radius: 0;
        border-bottom: 1px solid #E6EBF2;
      }
    }
  }

}