vue table表格中使用input框动态添加数据

html

<els-table
     :columns="columns"
     :data="dataTable.foromdata"
      style="width: 60%"
></els--table>

js

  columns: Object.freeze([
        {
          label: '计划1',
          prop: '$index',
          align: 'center',
          render: (h, { row, index }) => {
            return (
              <div>
                {row.$index + 1 ? (
                  <div>{row.$index + 1}</div>
                ) : (
                  <el-input v-model={row.$index} disabled />
                )}
              </div>
            )
          }
        },
        {
          label: '计划2',
          prop: 'annualTaxableIncome',
          align: 'center',
          render: (h, { row, index }) => {
            let that = this
            const handleEdits = () => {
              that.handleEditS(row, index)
            }
            return (
              <div>
                {row.annualTaxableIncome && self.dataTable.showSumber ? (
                  <div>{row.annualTaxableIncome}</div>
                ) : (
                  <el-input
                    v-model={row.annualTaxableIncome}
                    disabled={row.annualTaxableIncome == '无穷大'}
                    maxlength="100"
                    onblur={handleEdits}
                  />
                )}
              </div>
            )
          }
        },
        {
          label: '计划3',
          prop: 'taxRate',
          align: 'center',
          render: (h, { row, index }) => {
            let that = this
            const cess= () => {
              that.cess(row, index)
            }
            return (
              <div>
                {row.taxRate  ? (
                  <div>{row.taxRate}</div>
                ) : (
                  <el-input
                    v-model={row.taxRate}
                    onblur={cess}
                    
                  />
                )}
              </div>
            )
          }
        },
        {
          label: '计划4',
          prop: 'quickCal',
          align: 'center',
          render: (h, { row, index }) => {
            return (
              <div>
                {row.$index + 1 == 1 ? (
                  0
                ) : (
                  <div>{row.quickCal}</div>
                )}
              </div>
            )
          }
        },
        {
          label: '操作',
          align: 'center',
          render: (h, { row, index }) => {
            let that = this
            const add= () => {
              that.add(row, index)
            }
            const del= () => {
              that.del(row, index)
            }
            return (
              <div>
                {row.annualTaxableIncome == '无穷大' ? (
                  <i
                    class="el-icon-circle-plus-outline grens"
                    onClick={add}
                  ></i>
                ) : (
                  <i class="el-icon-circle-close reds" onClick={del}></i>
                )}
              </div>
            )
          }
        }
      ]), 
      dataTable: {
        foromdata: [
          {
            level: 1,
            annualTaxableIncome: '无穷大',
            taxRate: 20,
            quickCa: 2770,
            delFlag: 0
          }
        ]
      }