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>