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

elementui增删

2026-03-05 19:21:30前端教程

使用Element UI进行表格增删操作

Element UI提供了丰富的表格操作功能，包括增删改查。以下是在Vue项目中使用Element UI实现表格增删功能的具体方法。

表格数据删除

删除操作通常需要绑定表格行的删除按钮，并调用相应的方法处理数据。

<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 label="操作">
    <template slot-scope="scope">
      <el-button size="mini" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
    </template>
  </el-table-column>
</el-table>

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: '已取消删除'
      })          
    })
  }
}

表格数据新增

新增数据通常通过表单对话框实现，需要先定义表单数据模型和验证规则。

<el-button type="primary" @click="dialogVisible = true">新增</el-button>

<el-dialog title="新增数据" :visible.sync="dialogVisible">
  <el-form :model="form" :rules="rules" ref="form">
    <el-form-item label="日期" prop="date">
      <el-date-picker v-model="form.date" type="date"></el-date-picker>
    </el-form-item>
    <el-form-item label="姓名" prop="name">
      <el-input v-model="form.name"></el-input>
    </el-form-item>
  </el-form>
  <div slot="footer">
    <el-button @click="dialogVisible = false">取消</el-button>
    <el-button type="primary" @click="submitForm">确定</el-button>
  </div>
</el-dialog>

data() {
  return {
    form: {
      date: '',
      name: ''
    },
    rules: {
      date: [{ required: true, message: '请选择日期', trigger: 'change' }],
      name: [{ required: true, message: '请输入姓名', trigger: 'blur' }]
    },
    dialogVisible: false
  }
},
methods: {
  submitForm() {
    this.$refs.form.validate(valid => {
      if (valid) {
        this.tableData.push({
          date: this.form.date,
          name: this.form.name
        })
        this.dialogVisible = false
        this.$message.success('新增成功')
      }
    })
  }
}

批量删除操作

对于需要批量删除的场景，可以使用表格的多选功能配合批量删除按钮。

<el-table 
  :data="tableData" 
  @selection-change="handleSelectionChange"
  style="width: 100%">
  <el-table-column type="selection" width="55"></el-table-column>
  <!-- 其他列 -->
</el-table>

<el-button @click="batchDelete" :disabled="!selectedItems.length">批量删除</el-button>

data() {
  return {
    selectedItems: []
  }
},
methods: {
  handleSelectionChange(val) {
    this.selectedItems = val
  },
  batchDelete() {
    this.$confirm(`确认删除选中的${this.selectedItems.length}条记录吗?`, '提示', {
      // 确认对话框配置
    }).then(() => {
      this.selectedItems.forEach(item => {
        const index = this.tableData.indexOf(item)
        if (index > -1) {
          this.tableData.splice(index, 1)
        }
      })
      this.$message.success('批量删除成功')
    })
  }
}