element-plus 自定义添加行,动态添加数据

就是这样子的一个东西

1.html

 <el-button @click="handleAddData" style="margin-bottom: 10px" :disabled="!form.events?.length">新增行</el-button>
        <el-table :header-cell-style="{ background: 'rgb(40, 61, 97)' }" :data="tableData" style="width: 100%">
          <template v-for="(v,k) in form.events">
            <el-table-column :label="v.title" :prop="v.dataIndex" align="center">
              <template #default="{row, column}">
              <-- 打印column查看取到property和label，antd不一样 -->
                <el-input
                    v-model="tableData[row.key][column.property]"
                    :placeholder="`请输入${column.label}`"
                />
              </template>
            </el-table-column>
          </template>
          <el-table-column align="center" v-if="form.events?.length">
            <template #header>
              <div>操作</div>
            </template>
            <template #default="{row,column}">
              <el-button type="danger" @click="removeItem(row.key)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>

2.js

// column 
const form = ref({
    events:[{
        title:'姓名'，
        dataIndex:'name'，
    },{
        title:'年龄'，
        dataIndex:'age'
    }
//    {
 //  title: '操作',
 //  fixed: 'right',
 //  dataIndex: 'operation'
 //}
 ]
})
//表格数据
const tableData = ref([])
const count = computed(() => tableData.value.length)
// 点击新增行
const handleAddData = () =>{
  let newData:any = {
    key: `${count.value}`,
    name：'',
    age:'',
  }
  tableData.value.push(newData)
}

// 点击删除某行
const removeItem = (k:number | string) => {
  tableData.value = tableData.value.filter((item:any) => item.key !== k) // 移除某一项
  tableData.value = tableData.value.map((item:any) => { // key--
    if (item.key > k) {
      item.key--
      return item
    } else if (item.key === k) {
      return item.splice(k, 1)
    } else {
      return item
    }
  })
}