Klicken Sie auf eine Elementtabelle, um die Daten dieser Zeile zu ändern

Klicken Sie auf die Elementtabelle, um die Daten dieser Zeile zu ändern. Hier müssen Sie zum Betrieb das Attribut row-class-name der Tabelle verwenden

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