Element table click operation to modify the data of this row

Click on the element table to modify the data of this row, here you need to use the row-class-name attribute of the table to operate

    <template>
    <el-table
      :data="tableData"
      :row-class-name="tableRowClassName"
      style="width: 100%">
      <el-table-column
        fixed
        prop="name"
        label="姓名"
        >
      </el-table-column>
      <el-table-column
        prop="province"
        label="省份"
        >
      </el-table-column>
      <el-table-column
        prop="city"
        label="市区"
      >
      </el-table-column>
      <el-table-column
        prop="address"
        label="地址"
        width="300">
      </el-table-column>
      <el-table-column
        prop="zip"
        label="邮编"
        width="120">
        <template slot-scope="scope">
          <div v-if="scope.row.index==tableCli">
                 <el-input v-model="scope.row.id"></el-input>
          </div>
          <span v-else>{
   
   {scope.row.zip}}</span>
        </template>
      </el-table-column>
      <el-table-column
        fixed="right"
        label="操作"
        width="100">
        <template slot-scope="scope">
          <div v-if="scope.row.index==tableCli">{
   
   {showItem}}</div>
          <el-button v-else @click="handleClick(scope.row,scope)" type="text" size="small">查看</el-button>
          <el-button type="text" size="small">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
  </template>
  
  <script>
    export default {
      data() {
        return {
            tableCli:-1,
            showItem:'',
            tableData: [{
                          date: '2016-05-02',
                          name: '王小虎',
                          province: '上海',
                          city: '普陀区',
                          address: '上海市普陀区金沙江路 1518 弄',
                          zip: 200333
            }, {
                          date: '2016-05-04',
                          name: '王小虎',
                          province: '上海',
                          city: '普陀区',
                          address: '上海市普陀区金沙江路 1517 弄',
                          zip: 200333
            }, {
                          date: '2016-05-01',
                          name: '王小虎',
                          province: '上海',
                          city: '普陀区',
                          address: '上海市普陀区金沙江路 1519 弄',
                          zip: 200333
            }, {
                          date: '2016-05-03',
                          name: '王小虎',
                          province: '上海',
                          city: '普陀区',
                          address: '上海市普陀区金沙江路 1516 弄',
                          zip: 200333
            }]
        }
      },
      methods:{
          // 此方法用于区分是否点击的是当前行
           tableRowClassName({row,rowIndex}){
                   row.index=rowIndex
           },
           handleClick(row,index){
                   console.log(index)
                   this.tableCli=index.$index
                   if(row){
                        this.showItem='你好'
                   }
           }
      }
    }
  </script>