wangxu 发表于 2023-11-24 14:24:13

关于自定义ElementUI表格删除行数据的问题

本帖最后由 wangxu 于 2023-11-27 00:22 编辑

使用ElementUI 通用组件创建的 Table 表格，如何删除数据行。我使用 this.tableData.splice 方法无法删除行数据。


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

Vue App
return {
    data: function(){
      return {
      tableData: [{
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
      }, {
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
      }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
      },
      }
    },
    methods: {
                handleDelete: function(index, row) {
                        this.tableData = this.tableData.filter((item, idx) => idx !== index);
                }
    }
}


wangxu 发表于 2023-11-24 16:36:12

有知道的大神帮忙看看

论坛管理员 发表于 2023-11-27 09:29:21

这个就是vue上的东西了，您先F12跟踪看看，是否有报错呢

wangxu 发表于 2023-11-27 11:16:21

奇怪的问题，上周五还报错来着。今天一点问题都没有了。

论坛管理员 发表于 2023-11-28 09:37:13

;P   这么奇怪啊，会不会缓存原因，或者其他字段影响到？

wangxu 发表于 2023-11-28 10:24:18

可能吧，问题解决了就行。:handshake
页: [1]
查看完整版本: 关于自定义ElementUI表格删除行数据的问题