el-table删除当前空行（自己记录用）

THE W&W&W

于 2024-08-31 16:24:22 发布

阅读量159

点赞数 1

文章标签： vue.js javascript elementui

本文链接：https://blog.csdn.net/qq_44168981/article/details/141754495

版权

el-table绑定了tableData作为其数据源。每行后面的“删除”按钮通过scope.$index获取当前行的索引，并调用removeRow方法来删除对应的数据项。removeRow方法使用数组的splice方法来移除特定索引的元素，从而达到删除当前空行的目的。

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="date" label="日期" width="180"></el-table-column>
    <el-table-column prop="name" label="姓名" width="180"></el-table-column>
    <el-table-column prop="address" label="地址"></el-table-column>
    <el-table-column label="操作" width="150">
      <template slot-scope="scope">
        <el-button @click="removeRow(scope.$index)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>
 
<script>
export default {
  data() {
    return {
      tableData: [
        { date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' },
        // ... 其他数据
      ]
    };
  },
  methods: {
    removeRow(index) {
      this.tableData.splice(index, 1); // 删除索引为index的行
    }
  }
};
</script>