Opération de clic sur le tableau des éléments pour modifier les données de cette ligne

Cliquer sur l'élément table pour modifier les données de cette ligne, ici il faut utiliser l'attribut row-class-name de la table à opérer

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