antd vue 表格中嵌入各种表单元素（input，select，点击删除）

效果：

结构：

<a-table
  v-show="isDone==='plan'"
  :pagination="false"
  :columns="columns"
  :data-source="showList"
  bordered
  size="middle"
  :scroll="{ y: 'calc(100vh - 250px)' }"
>
  <template v-for="col in [ 'yearMon', 'wellType','dmMethod', 'wellName', 'wellTime', 'oilInc']" :slot="col" slot-scope="text, record,index">
    <div :class="col" :key="col">
      <a-input
        style="box-shadow: none;backgroundColor:rgba(0,0,0,0);border:none;margin:-10px 0;width:100%;height:100%;border:none;outline: none;textAlign:center"
        :ref="col"
        v-if="record.wellType==='waterWell'?col != 'oilInc'&&col != 'yearMon'&&col != 'wellType':col != 'yearMon'&&col != 'wellType'"
        :value="text"
        @keyup="(e) => handleChange(e.target, record, col)"
      />
      <a-select
        placeholder="请选择"
        v-if="col == 'yearMon'"
        v-model="record.yearMon"
        style="width: 100%"
        @change="aSelectChange($event,col,index)"
      >
        <a-select-option :value="ind >= 10 ? ind+1 : '0' + (ind+1)" v-for="(item, ind) in month" :key="ind"> {{ item }} </a-select-option>
      </a-select>
      <a-select
        placeholder="请选择"
        v-if="col == 'wellType'"
        v-model="record.wellType"
        style="width: 100%"
        @change="aSelectChange($event,col,index)"
      >
        <a-select-option :value="item.type" v-for="(item, ind) in [{name:'油井',type:'oilWell'},{name:'水井',type:'waterWell'}]" :key="ind"> {{ item.name }} </a-select-option>
      </a-select>
    </div>
  </template>
  <template slot="operation" slot-scope="text, record">
    <span @click.stop="delRow(record)" class="deletStyle">删除</span>
  </template>
</a-table>

数据：

data () {
    return {
      year: '',
      idNow: '',
      showList: [],
      showList2: [],
      saveList: [],
      dateList: [],
      planList: [],
      delPlanList: [],
      delDateList: [],
      columns,
      key: 0,
      key2: 0,
      isDone: 'plan',
      isWrite: true,
      month: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
    }
  }

功能：

delRow (record) {
  if (this.isDone === 'plan') {
    if (record.planId) {
      this.delPlanList.push(record.planId)
      this.delPlanList = Array.from(new Set(this.delPlanList))
      this.showList = this.showList.filter(item => {
        return item.key !== record.key
      })
    } else {
      this.showList = this.showList.filter(item => {
        return item.key !== record.key
      })
    }
  } else if (this.isDone === 'done') {
    if (record.implementId) {
      this.delDateList.push(record.implementId)
      this.delDateList = Array.from(new Set(this.delDateList))
      this.showList2 = this.showList2.filter(item => {
        return item.key !== record.key
      })
    } else {
      this.showList2 = this.showList2.filter(item => {
        return item.key !== record.key
      })
    }
  }
},
handleChange (value, record, column) {
  this.isWrite = true
  if (this.isDone === 'plan') {
    if (column !== 'wellName') {
      this.showList[record.key][column] = value.value
    } else {
      const arr = this.showList.filter(item => {
        return item.wellName === value.value && item.key !== record.key && item.wellType === record.wellType && item.yearMon === record.yearMon
      })
      if (arr.length === 0) {
        this.showList[record.key][column] = value.value
      } else {
        this.$message.warning('不能有重复井号', 1.5)
        value.value = this.showList[record.key][column]
      }
    }
  } else if (this.isDone === 'done') {
    if (column !== 'wellName') {
      this.showList2[record.key][column] = value.value
    } else {
      const arr = this.showList2.filter(item => {
        return item.wellName === value.value && item.key !== record.key && item.wellType === record.wellType && item.yearMon === record.yearMon
      })
      if (arr.length === 0) {
        this.showList2[record.key][column] = value.value
      } else {
        this.$message.warning('不能有重复井号', 1.5)
        value.value = this.showList2[record.key][column]
      }
    }
  }
},
aSelectChange (e, col, index) {
  this.isWrite = true
  if (this.isDone === 'plan') {
    if (e === 'oilWell' || e === 'waterWell') {
      this.showList[index][col] = e
    } else {
      this.showList[index][col] = this.year + '' + e
    }
  } else if (this.isDone === 'done') {
    if (e === 'oilWell' || e === 'waterWell') {
      this.showList2[index][col] = e
    } else {
      this.showList2[index][col] = this.year + '' + e
    }
  }
}