【vue+a-table】动态增加表格行动态删除表格行，通过点击按钮实现增加

1、首先是table和button，table的数据源通过点击按钮追加，每次点击追加一条
table的每一列都设置插槽，用来获取动态表格的值

    <a-table :dataSource="parameters" :columns="addtableColumnc"
    >
      <template v-for="col in ['ParamName', 'ParamDescription']" :slot="col" slot-scope="text, record">
              <a-input
                :key="col"
                style="margin: -5px 0"
                :value="text"
                :placeholder="'请输入'"
                @change="e => onInputChange(e.target.value, record.key, col)"
              />
            </template>
            <template slot="ParamType" slot-scope="text, record">
              <a-select v-model="record.ParamType" :placeholder="'请选择'" style="width: 100%">
                <a-select-option
                  v-for="paramType in apiParamTypes"
                  :key="paramType.dictCode"
                  :value="paramType.dictValue"
                >
                  {{ paramType.dictLabel }}
                </a-select-option>
              </a-select>
            </template>

            <template slot="ParamMustFillIn" slot-scope="text, record">
              <a-switch
                :checked="record.ParamMustFillIn == 1"
                @change="
                  checked => {
                    record.ParamMustFillIn = checked ? 1 : 0
                  }
                "
              />
            </template>
            <template slot="ParamValueInputType" slot-scope="text, record">
              <a-select
                style="width: calc(100% - 40px)"
                v-model="record.ParamValueInputType"
                :dropdownMatchSelectWidth="false"
                :placeholder="'请选择'"
              >
                <a-select-option
                  v-for="inputType in apiParamValueInputTypes"
                  :key="inputType.dictCode"
                  :value="inputType.dictValue"
                >
                  {{ inputType.dictLabel }}
                </a-select-option>
              </a-select>
            </template>
            <template slot="operation" slot-scope="text, record">
              <a-popconfirm title="是否要删除此行？" @confirm="removeMember(record)">
                <a>删除</a>
              </a-popconfirm>
            </template>   
    </a-table>
    <a-button style="width:calc(100% - 16px)" type="primary" @click="addtable()">点击增加行</a-button>

2、data中定义需要的所有数据

      parameters: [],//表格数据源
      apiParamTypes: [],//下拉框数据源1
      apiParamValueInputTypes: [],//下拉框数据源2
       // 表头
      addtableColumnc: [
    { title: 'xx名', dataIndex: 'ParamName', scopedSlots: { customRender: 'ParamName' } },
  { title: 'xx类型', dataIndex: 'ParamType', scopedSlots: { customRender: 'ParamType' } },
  { title: 'xx说明', dataIndex: 'ParamDescription', scopedSlots: { customRender: 'ParamDescription' } },
        {
          title: '是否必填',
          width: '120px',
          align: 'center',
          dataIndex: 'ParamMustFillIn',
          scopedSlots: { customRender: 'ParamMustFillIn' }
        },
        {
          title: 'xx输入类型',
          dataIndex: 'ParamValueInputType',
          scopedSlots: { customRender: 'ParamValueInputType' }
        },
    { title: '操作', width: '120px', align: 'center', scopedSlots: { customRender: 'operation' } }
      ],

3、点击按钮，新增行

  addtable(){
 const length = this.parameters.length
      this.parameters.push({
        key: length + 1,
        ApibaseId: this.piParamid,
        ParamName: '',
        ParamType: this.apiParamTypes.length > 0 && this.apiParamTypes[0].dictValue,
        ParamDescription: '',
        ParamMustFillIn: 1,
        aramValueInputType: this.apiParamValueInputTypes.length > 0 &&        this.apiParamValueInputTypes[0].dictValue
      })
    },

4、输入框如果有变化，用户输入内容的时候，查找到对应行，对应行的值赋值给输入框

   onInputChange(value, key, column) {
      const newData = [...this.parameters]
      const target = newData.find(item => key === item.key)
      if (target) {
        target[column] = value
        this.parameters = newData
      }
    },

5、点击删除，删除当前行。调删除的接口，过滤表格数组，如果数组里的项不等于选中的那一项，就保存到新数组里，赋值给原来的表格数据源。

  removeMember(row) {
 
        delParams({ ids: row.fPkApiParamId }).then(res => {
          if (res && res.code == 0) {
            const newData = this.parameters.filter(item => item.ApiParamId !== row.ApiParamId)
            this.parameters = newData
          }
        })