element-ui實現單元格點擊可編輯

 

 要實現表格填報功能，后台存儲的是表格的數據結構，從后端獲取json數組后，傳給頁面展示

頁面采用cell-click時通過控制 flag值來確定時顯示內容還是 input框

<el-table :data="tableData" border   @cell-click="cellDblClick">
      <!-- <el-table-column label="id主鍵" align="center" prop="inspectId" /> --> 
       <el-table-column label="檢查項目" align="center" prop="name" />
       <el-table-column prop="result" label="檢查結果" >
             <template slot-scope="{ row}" >
                <!-- <span v-if="!scope.row.isEditCell" style="cursor:pointer"> {{resultFormat(scope.row.result)}}
                </span> -->
                        <el-radio   v-model="row.result"   
                          v-for="dict in resultOptions"
                          :key="dict.dictValue"
                          :label="dict.dictValue"
                        >{{dict.dictLabel}}</el-radio>
<!--                <el-button v-if="scope.row.isEditCell" type="success" icon="el-icon-check" size="mini" @click="submitName(scope.row)"></el-button> --> 
             </template>
          </el-table-column>
          <el-table-column label="檢查標准" align="center" prop="checkStandard" width="350" />
         <el-table-column prop="hitch" label="發生故障位置" >
             <template slot-scope="scope">
                <span v-if="!scope.row.isEditCell" style="cursor:pointer">{{scope.row.hitch}}
                </span>
                <el-input v-if="scope.row.isEditCell"  
                          v-model="scope.row.hitch" placeholder="發生故障位置"
                           @blur="cellBlur(scope.row,scope.column)"  
                         style="width:70%" ref="hitchRef"></el-input>
                        <!-- <el-button v-if="scope.row.isEditCell" type="success" icon="el-icon-check" size="mini" @click="submitName(scope.row)"></el-button> -->
             </template>
          </el-table-column>
          <el-table-column prop="remark" label="備注">
                       <template slot-scope="scope">
                          <span v-if="!scope.row.isEditCell" style="cursor:pointer">{{scope.row.remark}}
                          </span>
                          <el-input v-if="scope.row.isEditCell"  
                                    v-model="scope.row.remark" placeholder="請輸入備注"
                                   @blur="cellBlur(scope.row,scope.column)"  
                                   style="width:70%" ref="remarkRef"></el-input>
                       </template>
          </el-table-column>
          
    </el-table>

腳本

 data() {
        return {
          tableData: [],
          resultOptions:null,
          submitData:{},
          inspectId:''
        }
      },
      created() {
        this.inspectId = this.$route.params && this.$route.params.inspectId;
        this.getTableList(this.inspectId);
        this.getDicts("sys_check_result").then(response => {
          this.resultOptions = response.data;
        });
      },
      methods: {
       // 獲取列表
       getTableList(inspectId) {
             this.loading = true;
             listInspectItem(inspectId).then(response => {
                console.log("response")
                      console.log(response)     
                          console.log(response.data.tabledata)     
                                 
                 this.tableData = response.data;
               this.loading = false;
             });
            
             console.log("this.tableData") 
                  console.log(this.tableData)   
              // 遍歷表數據，為每條數據添加isEditCell屬性
              var length = this.tableData.length;
              
              for (var i = 0; i < length; i++) {
                this.tableData[i].isEditCell = false;
              }
       },
       // 雙擊編輯
       cellDblClick(row,column) {
            console.log(column.property)
           if (column.property == "remark" ||column.property == "result" ||column.property == "hitch") {
               this.$set(row, "isEditCell", true);
           }
           this.tableData= this.tableData.filter(item => {
             return item;
           }) //視圖刷新
           console.log(column.property)
            if (column.property == "remark" ) {
              this.$nextTick(() => {
                this.$refs.remarkRef.focus(); // 視圖出現后使input獲取焦點
              })
           }  else {
              this.$nextTick(() => {
                this.$refs.hitchRef.focus(); // 視圖出現后使input獲取焦點
              })
           } 
          
       },
       // 可以編輯框失去焦點
       cellBlur(row, column) {
          row.isEditCell= false;
           this.$set(row, 'isEditCell', false);
       },
        
       // 提交
       submitName(row) {
         this.loading = true;
         let data = {inspectId: this.inspectId,result:this.tableData.toString()};
         this.submitData.inspectId = this.inspectId;
         
         this.submitData.ext1 =JSON.stringify(this.tableData);
         updateInspect(this.submitData).then(response => {
           if (response.code === 200) {
              this.loading = false;
             this.msgSuccess("修改成功");
             this.open = false;
             this.getTableList(this.inspectId);
           } else {
             this.msgError(response.msg);
           }
         });
       },
       },

有多種方法實現：
第一種：利用table的cell-dblclick和cell-style
1.template

<el-table
      :data="tableData"
      border
      @cell-dblclick="doubleClickCell"
      highlight-current-row
      :cell-style="defineRow"
      style="width: 100%">
      <el-table-column
        type="index"
        label="序號"
        width="50">
      </el-table-column>
      <el-table-column
        prop="username"
        label="負責人"
        width="180">
        <template v-slot="{ row, column, $index }">
          <el-input
            :ref="$index"
            v-show="editCurrentCell(row, column, $index)"
            v-model="row.username"
            @blur="test"
            placeholder="請輸入姓名">
          </el-input>
          <span v-show="!editCurrentCell(row, column, $index)">{{ row.username }}</span>
        </template>
      </el-table-column>
    </el-table>

2.JS

methods: {
    doubleClickCell (row, column, cell, event) {
      if (column.property !== 'username') { // 判斷這幾列是否可編輯
        return
      }
      this.clickRowIndex = row.rowIndex
      this.clickColProps = column.property
    },
    getRowKeys (row) {
      return row.username
    },
    defineRow (obj) { //重點是這個函數，給row添加rowIndex屬性，以便在doubleClickCell函數中使用
      Object.defineProperty(obj.row, 'rowIndex', {
        value: obj.rowIndex,
        writable: true,
        enumerable: false
      })
    },
    editCurrentCell (row, col, index) {
      if (row.rowIndex === this.clickRowIndex && col.property === this.clickColProps) {
        return true
      }
      return false
    }
}

第二種方法：在tableData中添加選中態編輯

1. template

<el-table
  :data="tableData"
  border
  highlight-current-row
  style="width: 100%">
  <el-table-column
    type="index"
    label="序號"
    width="50">
  </el-table-column>
  <el-table-column
    prop="username"
    label="負責人"
    width="180">
    <template v-slot="{ row, column, $index }">
      <el-input
        :ref="$index"
        v-show="row[`${column.property}Edit`]"
        v-model="row.username"
        placeholder="請輸入姓名">
      </el-input>
      <span
        @dblclick="doubleClickCell($index, column)"
        v-show="!row[`${column.property}Edit`]"
        >
        {{ row.username }}
      </span>
    </template>
  </el-table-column>
</el-table>

JS

data () {
  return {
    tableData: [{
      username: 'lily',
      usernameEdit: false,//編輯態標識
    }, {
      username: 'tony',
      usernameEdit: false,
    }],
  }
}
methods: {
    doubleClickCell (rowIndex, col) {
      this.$set(this.tableData[rowIndex], `${col.property}Edit`, true)
    },
}