elementui动态添加表格_element ui 动态表格

一显示效果

二、代码

全部粘贴上去即可 

<template>
  <div>
    <el-button @click="addRow">添加行</el-button>
    <el-button @click="saveAll" type="primary" style="margin-left: 10px">保存全部</el-button>
    <el-table :data="tableData" :empty-text="'没有数据'" size="mini" style="width: 600px">
      <el-table-column prop="date" label="日期" width="180">
        <template slot-scope="scope">
          <el-input
            v-model="scope.row.date"
            placeholder="请输入日期"
            v-show="scope.row.editing"
          ></el-input>
          <span v-show="!scope.row.editing">{{ scope.row.date }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="name" label="姓名" width="180">
        <template slot-scope="scope">
          <el-input
            v-model="scope.row.name"
            placeholder="请输入姓名"
            v-show="scope.row.editing"
          ></el-input>
          <span v-show="!scope.row.editing">{{ scope.row.name }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="food" label="食物">
        <template slot-scope="scope">
          <el-select
            v-model="scope.row.food"
            placeholder="请选择食物"
            v-show="scope.row.editing"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
          <span v-show="!scope.row.editing">{{ scope.row.food }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="100">
        <template slot-scope="scope">
          <el-button
            v-if="!scope.row.editing"
            @click="startEditing(scope.row)"
            type="text"
            size="small"
          >
            编辑
          </el-button>
          <el-button
            v-else
            @click="save(scope.row)"
            type="text"
            size="small"
          >
            保存
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      tableData: [],
      options: [
        { value: 'apple', label: '苹果' },
        { value: 'banana', label: '香蕉' },
        { value: 'orange', label: '橙子' }
      ]
    };
  },
  methods: {
    addRow() {
      const newRow = {
        date: '',
        name: '',
        food: '',
        editing: true
      };
      this.tableData.push(newRow);
    },
    startEditing(row) {
      row.editing = true;
    },
    save(row) {
      row.editing = false;
    },
    saveAll() {
      this.tableData.forEach(row => {
        row.editing = false;
      });
    //   const payload = this.tableData.map(row => ({
    //   date: row.date,
    //   name: row.name,
    //   food: row.food
    // }));
 
    // 发送POST请求到后端API端点
    // axios.post('/api/save-data', payload)
    //   .then(response => {
    //     // 根据后端的响应进行相应的处理
    //     console.log(response.data); // 可以打印响应结果或做其他处理
    //   })
    //   .catch(error => {
    //     // 处理请求错误
    //     console.error(error);
    //   });
    }
  }
};
</script>