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

wangxu

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


Vue Template

[JavaScript] 纯文本查看 复制代码

<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

[JavaScript] 纯文本查看 复制代码

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

有知道的大神帮忙看看

论坛管理员

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

wangxu

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

论坛管理员

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

wangxu

可能吧，问题解决了就行。