Vue+element-ui table组件的点击按钮改变表格状态

刚接触Vue几天，还不是很熟，随手记一下实现的一个简单小功能。

 

要实现点击操作栏中的编辑按钮，改变该行的姓名栏状态，使其变成input框

 

 

 话不多说，直接贴代码，方便以后再用，标黄部分为功能代码

<template>
  <el-row style="height: 100%;width:100%" type="flex" justify="center">
    <el-col :span="24">
      <el-table
        :data="tableData"
        :stripe="true"
        height="100%"
        style="width: 100%"
        :row-class-name="tableRowClassName">
        <el-table-column
          prop="date"
          label="日期"
          width="auto"
          align="center"
          :resizable="false">
        </el-table-column>
        <el-table-column
          prop="name"
          label="姓名"
          width="auto"
          align="center"
          :resizable="false">
          <template slot-scope="scope">
            <el-input v-if=" isEdit == scope.$index " v-model="scope.row.name" placeholder="请输入内容" style="text-align: center;"></el-input>
            <span v-if=" isEdit != scope.$index ">{{ scope.row.name }}</span>
          </template>
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
          width="auto"
          align="center"
          :resizable="false">
          <template slot-scope="scope">
            <el-button
              size="mini"
              @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-col>
  </el-row>
</template>

<script>
  export default {
    data() {
      return {
        tableData: [{
          date: '2016-05-02',
          name: '王小虎'
        }, {
          date: '2016-05-04',
          name: '王小虎'
        }, {
          date: '2016-05-01',
          name: '王小虎'
        }, {
          date: '2016-05-03',
          name: '王小虎'
        }],
        isEdit: -1
      }
    },
    methods: {
      handleEdit(index, row) {
        this.isEdit = index;
      },
      handleDelete(index, row) {
        alert(index, row);
      },
      tableRowClassName({row, rowIndex}){
        row.index = rowIndex
      }
    }
  }
</script>

<style>
  html, body {
    height: 100%;
  }
</style>