Element table data is not re-rendered

Description of specific requirements

There is such a table

After clicking edit

You can directly modify the name, confirm to save, or cancel to restore to the previous state. I will put the online demo address below, if you want to, you can play it yourself.
Demo

The speed of accessing the Demo in China will be very slow, or it will be inaccessible, the reason you know is O(∩_∩). Maybe you need a stable ladder🪜, you can check this article Link

Upload code

<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>

The idea is to add an edit state to the data of this row when you click the edit button of a certain row. Take a look at this method of handling edit events:

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

The more critical point is to regenerate a tableData data. In order to make the table re-render, I have tried to use:

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

There will be no response after clicking edit.

Extension summary

At this point we can already solve this demand. But I'm not waiting for the idle generation to be so easy to satisfy 😌, take this opportunity to study some methods in JavaScript that can generate new data:

• Of course we can use for loops or forEach to generate new structures, but it is far less elegant than map()

• When we need to filter some eligible subsets of a collection, the filter method is very convenient, and also use the tableData above as an example

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

  The resulting list is a new collection with the first two pieces of data removed, and the original tableData will not change.

• splice method

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

• concat method

  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 operator (Spread)

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

  To sum up so much first, I may add more later...Thank you for watching😄