element-plus el-table、动态添加、删除行、input输入框

在Vue.js中使用Element Plus库的<el-table>组件时，可以通过动态绑定数据来实现动态添加、删除行以及输入框的响应。以下是一个简单的示例：

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="date" label="日期" width="180">
    </el-table-column>
    <el-table-column prop="name" label="姓名" width="180">
      <template #default="scope">
        <el-input v-model="scope.row.name"></el-input>
      </template>
    </el-table-column>
    <el-table-column label="操作" width="150">
      <template #default="scope">
        <el-button @click="handleDelete(scope.$index)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  <el-button @click="handleAdd">添加行</el-button>
</template>
 
<script>
import { ref } from 'vue';
 
export default {
  setup() {
    const tableData = ref([
      { date: '2016-05-02', name: '王小虎' },
      // ...可以添加更多行
    ]);
 
    const handleAdd = () => {
      tableData.value.push({ date: '', name: '' });
    };
 
    const handleDelete = (index) => {
      tableData.value.splice(index, 1);
    };
 
    return {
      tableData,
      handleAdd,
      handleDelete,
    };
  },
};
</script>

在这个示例中，tableData是一个响应式数组，它包含了表格中显示的数据。handleAdd方法用来向tableData数组添加新的空白行，而handleDelete方法则用来删除指定索引的行。每个el-table-column的prop属性分别绑定了对应的数据字段，而第二列使用了#default插槽来渲染一个el-input组件，用于输入数据。

当用户点击添加按钮时，会调用handleAdd方法添加新行；当用户点击删除按钮时，会调用handleDelete方法删除对应行。在el-input中输入的数据会实时反映在tableData数组中对应的元素上。