element-ui实现单元格点击可编辑

Posted 2021-06-08 netcore_vue

 

 要实现表格填报功能，后台存储的是表格的数据结构，从后端获取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)
    },
}