Element表格数据没有重新渲染

具体需求说明

有这样一个表格

点击编辑后

可以直接修改姓名，确定保存，或者取消恢复到之前的状态，在线的演示地址我放到下边，如果你愿意的话可以自己去把玩一下。
Demo

在国内访问Demo的速度会很慢，或者就是无法访问，原因你懂的O(∩_∩)。也许你需要一个稳定的梯子🪜，可以查看这篇文章Link

上代码

<template>
  <div class="demo-block">
    <el-table
        border
        size="mini"
        :data="tableData"
        style="width: 400px">
      <el-table-column
          label="姓名"
          width="180">
        <template slot-scope="scope">
          <el-input v-if="scope.row.editMode" v-model="input" size="mini" placeholder="请输入内容"></el-input>
          <span v-else>{{ scope.row.name }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
              size="mini"
              @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button
              v-if="scope.row.editMode"
              size="mini"
              @click="handleCancel(scope.$index, scope.row)">取消</el-button>
          <el-button
              v-if="scope.row.editMode"
              size="mini"
              type="primary"
              @click="handleConfirm(scope.$index, scope.row)">确定</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  name: "Element",
  data() {
    return {
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄'
      }],
      input: ''
    }
  },
  methods: {
    handleEdit(index, row) {
      this.tableData = this.tableData.map((item, i) => {
        if (index === i) {
          item.editMode = true
        }
        return item
      })
      this.input = row.name;
    },
    handleCancel(index) {
      this.tableData = this.tableData.map((item, i) => {
        if (index === i) {
          item.editMode = false
        }
        return item
      })
    },
    handleConfirm(index) {
      this.tableData = this.tableData.map((item, i) => {
        if (index === i) {
          item.editMode = false
          item.name = this.input
        }
        return item
      })
    }
  }
}
</script>

<style scoped>
.demo-block {
  border: 1px solid #ebebeb;
  border-radius: 3px;
  transition: .2s;
}
</style>

思路就是在点击某一行的编辑按钮时，给这一行的数据添加一个编辑的状态。看下这个处理编辑事件的方法：

handleEdit(index, row) {
      this.tableData = this.tableData.map((item, i) => {
        if (index === i) {
          item.editMode = true
        }
        return item
      })
      this.input = row.name;
}

比较关键的点就是重新生成了一份tableData数据。这样才能使表格重新渲染，再开始我曾尝试使用：

handleEdit(index, row) {
      this.tableData.forEach((item, i) => {
        if (index === i) {
          item.editMode = true
        }
        return item
      })
      this.input = row.name;
}

这样点击编辑后不会有任何反应的。

扩展总结

到这里我们已经可以解决这个需求。但是我等并非等闲之辈就这么容易满足😌，借此机会研究一下JavaScript中一些可以生成新数据的方法：

• 当然我们可以使用for循环，或者forEach来生成新的结构，但是远不如map()优雅

• 当我们需要筛选一个集合中的某些符合条件的子集filter方法会很方便，还用上边的tableData举例

  const list = tableData.filter((item, i) => {
  return i > 1
  })
  // 结果
  [{
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄'
  }]

  这样得到的list就是除去前两条数据的新集合，而原来的tableData并不会发生变化。

• splice方法

  const removed = tableData.splice(0,1)
  
  // removed
  [{
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄'
  }]
  // 原集合会发生变化只剩下后三条数据

• concat方法

  const arr = [{
        date: '2016-05-10',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄'
  }]
  tableData.concat(arr)
  // 原集合会连结arr生成新的结构
  [{date: '2016-05-04', name: '王小虎', address: '上海市普陀区金沙江路 1517 弄'},
  {date: '2016-05-01', name: '王小虎', address: '上海市普陀区金沙江路 1519 弄'},
  {date: '2016-05-03', name: '王小虎', address: '上海市普陀区金沙江路 1516 弄'},
  {date: '2016-05-10', name: '王小虎', address: '上海市普陀区金沙江路 1519 弄'}]

• 展开操作符(Spread)

  const arr = [...tableData]
  // arr 从 tableData复制了一份，原来的tableData不会变化

  先总结这么多，后续可能还会补充...谢谢观看😄