Vue 开发表格行上 LOV

介绍

使用上和我的上一篇Vue 开发 Lov基本上一致，只有几点不一样。

使用

<LineLov v-model="scope.row.goodsCode" :value="scope.row.goodsCode" code="GOODS_PURCHASE_CODE" lovPlaceholder="商品编码" ref="goodsLov" @method="goodsLovMethod" :index="scope.$index" />

index:记录行上的下标，从0开始
value:记录需要为组件赋的值
goodsLovMethod的代码：

goodsLovMethod (item) {
   
        this.dataList[item.index].specsName = item.row.specsName
        this.dataList[item.index].specsValue = item.row.specsValue
        this.dataList[item.index].stockNum = item.row.goodsStock
        this.dataList[item.index].goodsName = item.row.goodsName
        this.dataList[item.index].goodsUnitOfMeasure = item.row.goodsUnitOfMeasure
        this.dataList[item.index].purchasePrice = item.row.purchasePrice
        this.dataList[item.index].goodsId = item.row.id
        this.dataList[item.index].goodsCode = item.row.goodsCode
}

组件代码

index.vue

<template>
  <div class="mod-config">
    <el-input :placeholder="lovPlaceholder" v-model="newModel" class="input-with-select" @clear="clearValue" :disabled="lovDisabled">
      <el-button slot="append" icon="el-icon-search" @click="butClick" :disabled="lovDisabled"></el-button>
    </el-input>
    <line-lovs v-if="lovVisible" ref="lineLov" @getLovValue="getValue" :data="lovData"></line-lovs>
  </div>
</template>
<script>
import LineLovs from './line-lov'
export default {
   
  components: {
    LineLovs },
  model: {
   
    prop: 'lovModel'// 指向props的参数名
  },
  props: {
   
    code: {
   
      type: String,
      default: ''
    },
    lovPlaceholder: {
   
      type: String,
      default: '请输入'
    },
    lovDisabled: {
   
      type: Boolean,
      default: false
    },
    lovModel: {
   
      type: [String, Number],
      default: ''
    },
    index: {
   
      type: Number,
      default: 0
    },
    value: ""
  },
  created () {
   
    this.newModel = this.$props.value
  },
  data () {
   
    return {
   
      lovVisible: false,
      newModel: '',
      lovData: {
   }
    }
  },
  watch: {
   
    lovModel(val, oldVal