当前位置：首页 > 前端教程

elementui增删

2026-01-13 22:42:40前端教程

ElementUI 表格的增删操作

ElementUI 提供了强大的表格组件，支持数据的增删改查操作。以下是实现增删功能的详细方法：

安装 ElementUI 确保项目中已安装 ElementUI，可以通过 npm 或 yarn 安装：

npm install element-ui

引入 ElementUI 在 main.js 中引入 ElementUI：

import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI)

表格数据绑定

使用 el-table 组件绑定数据，并通过 v-model 实现双向绑定：

<el-table :data="tableData" style="width: 100%">
  <el-table-column prop="date" label="日期"></el-table-column>
  <el-table-column prop="name" label="姓名"></el-table-column>
  <el-table-column prop="address" label="地址"></el-table-column>
  <el-table-column label="操作">
    <template slot-scope="scope">
      <el-button size="mini" @click="handleDelete(scope.$index)">删除</el-button>
    </template>
  </el-table-column>
</el-table>
<el-button @click="handleAdd">新增</el-button>

新增数据

通过方法向表格数据数组中添加新条目：

methods: {
  handleAdd() {
    this.tableData.push({
      date: '2023-01-01',
      name: '新用户',
      address: '新地址'
    })
  }
}

删除数据

使用数组的 splice 方法根据索引删除数据：

methods: {
  handleDelete(index) {
    this.tableData.splice(index, 1)
  }
}

完整示例代码

<template>
  <div>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="date" label="日期"></el-table-column>
      <el-table-column prop="name" label="姓名"></el-table-column>
      <el-table-column prop="address" label="地址"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleDelete(scope.$index)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-button @click="handleAdd">新增</el-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          date: '2023-01-01',
          name: '张三',
          address: '北京市'
        },
        {
          date: '2023-01-02',
          name: '李四',
          address: '上海市'
        }
      ]
    }
  },
  methods: {
    handleAdd() {
      this.tableData.push({
        date: '2023-01-01',
        name: '新用户',
        address: '新地址'
      })
    },
    handleDelete(index) {
      this.tableData.splice(index, 1)
    }
  }
}
</script>