el-table 单元格编辑

vue页面代码 

      <el-table-column align="center" label="label1" min-width="75">
        <template slot-scope="{row, $index}">
          <span v-show="!row.isEdit || editCell !== 'value1'" class="editCell" @click="editCurrRow('value1', row, $index)">{{ row.value1}}</span>
          <el-input v-show="row.isEdit && editCell === 'value1'" :ref="'value1' + $index" v-model="row.value1" oninput="value=value.replace(/[^\d]/g,'')" clearable size="mini" @blur="row.isEdit = false" />
        </template>
      </el-table-column>
      <el-table-column align="center" label="label2" min-width="75">
        <template slot-scope="{row, $index}">
          <span v-show="!row.isEdit || editCell !== 'value2'" class="editCell" @click="editCurrRow('value2', row, $index)">{{ row.value2}}</span>
          <el-input v-show="row.isEdit && editCell === 'value2'" :ref="'value2' + $index" v-model="row.value2" oninput="value=value.replace(/[^\d]/g,'')" clearable size="mini" @blur="row.isEdit = false" />
        </template>
      </el-table-column>
      <el-table-column align="center" label="label3" min-width="75">
        <template slot-scope="{row, $index}">
          <span v-show="!row.isEdit || editCell !== 'value3'" class="editCell" @click="editCurrRow('value3', row, $index)">{{ row.value3}}</span>
          <el-input v-show="row.isEdit && editCell === 'value3'" :ref="'value3' + $index" v-model="row.value3" oninput="value=value.replace(/[^\d]/g,'')" clearable size="mini" @blur="row.isEdit = false" />
        </template>
      </el-table-column>

 变量属性声明

data() {
    return {
      tableData: [],
      total: 0,
      listLoading: false,
      downloadLoading: false,
      listQuery: {
        pageNum: 1,
        pageSize: 10,
        examineMonth: '' // 月
      },
      editCell: '' // 当前编辑单元格
    }

方法声明 

    editCurrRow(prefix, row, index) {
      row.isEdit = true
      this.editCell = prefix
      this.$nextTick(() => {
        this.$refs[prefix + index].focus()
      })
    }

给每行的isEdit赋初始值 

    getList() {
      this.listLoading = true
      getPage(this.listQuery).then(response => {
        if (response.data && response.status === 200) {
          const data = response.data.records
          this.total = response.data.total
          data.forEach(item => {
            item.isEdit = false
            this.tableData.push(item)
          })
        }
        this.listLoading = false
      })
    },

效果展示 

 

结束！