CRUDTable ElementUI

一、解决方案简述

在现代Web开发中，实现表格的增删改查（CRUD）功能是非常常见的需求。ElementUI 提供了强大的 Table 组件来展示数据，并且可以与 Form 等其他组件结合使用，以实现完整的 CRUD 功能。介绍如何使用 ElementUI 实现一个具备基本 CRUD 操作的表格。

二、创建表格并展示数据

我们需要引入 ElementUI 的相关组件，并创建一个基础表格来展示数据。

html

  
    
    
    
    
      
        编辑
        删除
      
    
  
</p>


export default {
  data() {
    return {
      tableData: [
        {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区江路 1518 弄'
        },
        {
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区江路 1517 弄'
        },
        // 其他数据...
      ]
    }
  },
  methods: {
    handleEdit(index, row) {
      console.log('编辑:', index, row);
    },
    handleDelete(index, row) {
      console.log('删除:', index, row);
    }
  }
}


<p>

这段代码展示了如何创建一个简单的表格，并为每一行添加了“编辑”和“删除”按钮。点击这些按钮时会触发相应的处理函数。

三、实现添加功能

为了实现添加新记录的功能，我们可以添加一个表单用于输入新数据，并将数据添加到 tableData 中。

html

  <!-- 表格部分保持不变 -->
  
    
      
    
    
      
    
    
      
    
    
      添加
    
  
</p>


export default {
  // ...省略前面定义的数据
  data() {
    return {
      form: {
        date: '',
        name: '',
        address: ''
      }
    }
  },
  methods: {
    onSubmit() {
      this.tableData.push(this.form);
      // 清空表单
      this.form = { date: '', name: '', address: '' };
    }
  }
}


<p>

四、实现更新功能

对于编辑功能，我们可以在点击“编辑”按钮时弹出一个对话框显示当前行的数据，修改后保存。

html

  <!-- 表格部分保持不变 -->
  
    
      
        
      
      
        
      
      
        
      
    
    <div class="dialog-footer">
      取 消
      确 定
    </div>
  
</p>


export default {
  // ...省略前面定义的数据
  data() {
    return {
      dialogFormVisible: false,
      editForm: {}
    }
  },
  methods: {
    handleEdit(index, row) {
      this.editForm = Object.assign({}, row); // 复制对象
      this.dialogFormVisible = true;
    },
    saveEdit() {
      for (let i = 0; i < this.tableData.length; i++) {
        if (this.tableData[i].date === this.editForm.date && this.tableData[i].name === this.editForm.name) {
          this.tableData.splice(i, 1, this.editForm);
          break;
        }
      }
      this.dialogFormVisible = false;
    }
  }
}


<p>

五、实现删除功能

最后是删除功能，我们已经在表格中为每一行添加了“删除”按钮，在 handleDelete 方法中实现逻辑即可。

javascript methods: { handleDelete(index, row) { this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }).then(() => { this.tableData.splice(index, 1); this.$message({ type: 'success', message: '删除成功!' }); }).catch(() => { this.$message({ type: 'info', message: '已取消删除' }); }); } }