动态添加表格中下拉框

父级页面

<div class="threePart">
            <ul>
                <li style="width:114px"><span style="color:red;">*</span>场景</li>
                <li style="width:222px"><span style="color:red;">*</span>账号</li>
                <li style="width:112px"><span style="color:red;">*</span>交易类型</li>
                <li style="width:113px"><span style="color:red;">*</span>收支类型</li>
                <li style="width:112px"><span style="color:red;">*</span>交易币种</li>
                <li style="width:142px"><span style="color:red;">*</span>交易金额</li>
                <li style="width:232px"><span style="color:red;">*</span>交易时间</li>
                <li style="width:223px"><span style="color:red;">*</span>备注</li>
                <li style="width:91px;border-right:1px solid #a7a6a6;">操作</li>
            </ul>
            <table border="1" cellspacing="0">
                <tbody id="tbMain">
                    <tr1 v-for="(it,index) in quotations" :key="it.id" :ref="'quotation' + index" :rowDate="it" :handlingFeeCurrency="ruleFormSecond.handlingFeeCurrency" :transactionCurrency="ruleFormSecond.transactionCurrency" :scenesLists="scenesList" @add="addLedger" @del="del(index)"></tr1>
                </tbody>
            </table>
        </div>

父级页面js

import tr1 from './tr-con.vue'
export default {
data() {
    // 业务分类基准数据格式
	const quotationBase = {
	  a: undefined,
	  b: undefined
	}
	return {
    // 业务分类基准数据格式
	  quotationBase,
	  quotations: [{'id': '-3'}]
	}
  },
  methods: {
	// 添加台账记录
    addLedger() {
      if (this.quotations.length < 10) {
        const quotation = Object.assign({ id: this.randomString(9) }, this.quotationBase)
        this.quotations.push(quotation)
      } else {
        this.$message({
          message: '最多可录入10笔台账',
          type: 'warning'
        })
      }
    },
    randomString(length) {
      const str = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ'
      let result = ''
      for (let i = length; i > 0; --i) {
        result += str[Math.floor(Math.random() * str.length)]
      }
      return result
    },
    // 删除台账记录
    del(k) {
      this.quotations.splice(k, 1)
    },
  }
}

父级页面样式

.threePart {
        width: 1361px;
        ul {
            list-style: none;
            word-wrap: nowrap;
            li {
                text-align: center;
                display: inline-block;
                border: 1px solid #a7a6a6;
                padding: 5px;
                border-bottom: 0;
                border-right: 0;
            }
        }
        table {
            width: 1360px;
            border: 1px solid #a7a6a6;
            tbody {
                td {
                    padding: 5px;
                    text-align: center;
                    a {
                        font-size: 24px;
                        margin-left: 3px;
                    }
                    .el-input__icon {
                        color: #7b7b7c !important;
                    }
                    .el-input__inner {
                        border: 1px solid #7b7b7c !important;
                    }
                }
            }
        }
    }

子级页面

<template>
    <div class="tdCon">
            <tr>
                <td style="width:100px">
                    <el-select v-model="Data.transType" placeholder="请选择" style="width:100px">
                        <el-option v-for="item in scenesLists" :key="item.value" :label="item.label" :value="item.value"></el-option>
                    </el-select>
                </td>
                <td style="width:210px">
                    <el-input style="width:210px;" v-model="Data.accNo"></el-input>
                </td>
                <td style="width:100px">
                    <el-select v-model="Data.busType" placeholder="请选择" style="width:100px">
                        <el-option v-for="item in transactionTypeVal" :key="item.value" :label="item.label" :value="item.value"></el-option>
                    </el-select>
                </td>
                <td style="width:100px">
                    <el-select v-model="Data.category" placeholder="请选择" style="width:100px">
                        <el-option v-for="item in category" :key="item.value" :label="item.label" :value="item.value"></el-option>
                    </el-select>
                </td>
                <td style="width:100px">
                    <!-- Data.currency -->
                    <el-select v-show="transactionCurrency === '' && handlingFeeCurrency === ''" v-model="Data.currency" placeholder="请选择" style="width:100px">
                        <el-option v-for="item in transactionCurrencyVal" :key="item.value" :label="item.label" :value="item.value"></el-option>
                    </el-select>
                    <el-select v-show="transactionCurrency !== '' || handlingFeeCurrency !== ''" v-model="Data.currency" placeholder="请选择" style="width:100px">
                        <el-option v-for="item in transactionCurrencyVal" v-show="transactionCurrency === item.value || handlingFeeCurrency === item.value || item.value===''" :key="item.value" :label="item.label" :value="item.value"></el-option>
                    </el-select>
                </td>
                <td style="width:130px">
                    <el-input style="width:130px;" v-model="Data.transAmount"></el-input>
                </td>
                <td style="width:200px">
                    <!-- <el-date-picker
                    v-model="Data.transTime"
                    type="date"
                    :picker-options="pickerOptions"
                    placeholder="选择日期">
                    </el-date-picker> -->
                    <el-date-picker
                      v-model="Data.transTime"
                      type="datetime"
                      :picker-options="pickerOptions"
                      placeholder="选择日期">
                    </el-date-picker>
                </td>
                <td style="width:210px">
                    <el-input style="width:210px;" v-model="Data.remark"></el-input>
                </td>
                <td style="width:92px">
                    <a @click="addLedger">+</a>
                    <a @click="del()">-</a>
                </td>
            </tr>
    </div>
</template>

子级页面js

export default {
  name: 'TdCon',
  // scenesLists是场景的下拉内容
  props: ['scenesLists', 'transactionCurrency', 'rowDate', 'handlingFeeCurrency'],
  data() {
    // 表格数据基准格式
	const DataBase = {
      transType: '',
      accNo: '',
      busType: '',
      category: '',
      currency: '',
      transAmount: '',
      transTime: '',
      remark: ''
	}
    return {
      // 表格数据基准格式
	  DataBase,
	  // 表格数据
	  Data: Object.assign({}, DataBase),
      transactionTypeVal: [
        { value: '', label: '--请选择--' }
      ],
      transactionCurrencyVal: [
        { value: '', label: '--请选择--' }
      ],
      category: [
        { value: '', label: '--请选择--' },
        { value: 'IN', label: '收入' },
        { value: 'OUT', label: '支出' }
      ],
      pickerOptions: {
        // 选择当前月份或大于当前月份时间
        disabledDate (time) {
          return time.getTime() < Date.now() - 8.64e7
        }
      }
    }
  },
  watch: {
    rowDate: {
        handler(){
          if (this.rowDate.transType !== undefined || this.rowDate.accNo !==undefined || this.rowDate.busType !== undefined || this.rowDate.category !== undefined || this.rowDate.currency !==undefined || this.rowDate.transAmount !==undefined || this.rowDate.remark !==undefined || this.rowDate.transTime !==undefined) {
            this.Data.transType = this.rowDate.transType
            this.Data.accNo = this.rowDate.accNo
            this.Data.busType = this.rowDate.busType
            this.Data.category = this.rowDate.category
            this.Data.currency = this.rowDate.currency 
            this.Data.transAmount = this.rowDate.transAmount
            this.Data.remark = this.rowDate.remark
            this.Data.transTime = this.rowDate.transTime
          }
        },
        immediate: true
      }
  },
  mounted() {
    this.acctTypeChannelListBusType()
    this.AccCurrencyListDictQuery()
  },
  methods: {
      addLedger() {
          this.$emit('add')
      },
      del() {
          this.$emit('del')
      },
      getData() {
  		return Object.assign({}, this.Data)
	  }
  }
}

子级页面样式

<style lang="scss">
.tdCon {
    width: 100%;
}
</style>

示例