表格编辑时,根据这一行弹出层显示编辑界面,点击保存时发送请求,请求成功保存好数据到表达,请求错误,弹出提示

复制代码
这是一个网上的列子, 一表格,点击编辑时弹出层编辑这一行,点击保存时送请求的完整示例:
<template>
  <div>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="name" label="姓名"></el-table-column>
      <el-table-column prop="role" label="角色"></el-table-column>
      <el-table-column prop="date" label="日期"></el-table-column>
      <el-table-column label="编辑">
        <template slot-scope="scope">
          <el-button @click="handleEdit(scope.row)">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog :visible.sync="dialogVisible">
      <el-form ref="form" :model="editedData">
        <el-form-item label="姓名" prop="name">
          <el-input v-model="editedData.name"></el-input>
        </el-form-item>
        <el-form-item label="角色" prop="role">
          <el-input v-model="editedData.role"></el-input>
        </el-form-item>
        <el-form-item label="日期" prop="date">
          <el-date-picker v-model="editedData.date" type="date"></el-date-picker>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleSave">保存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      tableData: [],
      dialogVisible: false,
      editedData: {
        name: '',
        role: '',
        date: ''
      }
    };
  },

  created() {
    this.fetchData();
  },

  methods: {
    fetchData() {
      // 发送请求获取表格数据
      axios.get('/api/tableData').then(response => {
        this.tableData = response.data;
      }).catch(error => {
        console.log(error);
      });
    },

    handleEdit(row) {
      // 弹出编辑窗口,并将当前行的数据赋值给 editedData
      this.editedData = Object.assign({}, row);
      this.dialogVisible = true;
    },

    handleSave() {
      // 发送保存请求
      axios.post('/api/saveData', this.editedData).then(response => {
        if (response.data.success) {
          // 请求成功,关闭编辑窗口并刷新表格数据
          this.dialogVisible = false;
          this.fetchData();
        } else {
          // 请求失败,提示操作错误
          this.$message.error('操作失败,请稍后重试!');
        }
      }).catch(error => {
        console.log(error);
      });
    }
  }
};
</script>
复制代码

 

posted @   稷下元歌  阅读(34)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 全程不用写代码,我用AI程序员写了一个飞机大战
· DeepSeek 开源周回顾「GitHub 热点速览」
· 记一次.NET内存居高不下排查解决与启示
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· .NET10 - 预览版1新功能体验(一)
点击右上角即可分享
微信分享提示