Vue Element Table表格双击单元格进行单元格编辑-学习笔记

项目中需要双击table单元格，进行某单元格的内容编辑工作，具体实现代码如下：

<template>
  <div v-show="isShowPanel" class="attributeContainer">
    <el-table
      max-height="320"
      highlight-current-row
      size="small"
      border
      :data="tableData"
      @cell-dblclick="cellEdit"
      class="tableStyle"
    >
      <el-table-column show-overflow-tooltip prop="id" label="ID"> </el-table-column>
      <el-table-column prop="unit" label="单元">
        <template slot-scope="scope">
          <el-input ref="unit" v-if="scope.row.isEdit" clearable v-model="scope.row.unit"
            @keyup.enter.native="onBlur(scope.row, scope.column)" @blur="onBlur(scope.row, scope.column)"></el-input>
          <span v-else>{{ scope.row.unit }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="roomnum" label="门牌号">
        <template slot-scope="scope">
          <el-input ref="roomnum" v-if="scope.row.isEdit" clearable v-model="scope.row.roomnum"
            @keyup.enter.native="onBlur(scope.row, scope.column)" @blur="onBlur(scope.row, scope.column)"></el-input>
          <span v-else>{{ scope.row.roomnum}}</span>
        </template>
      </el-table-column>
    </el-table>
    <el-button @click="saveData" style="width: 50%; margin-top: 10px" size="mini">保存属性</el-button
    >
  </div>
</template>

<script>
export default {
  name: "AttributePanel",
  data() {
    return {
      isShowPanel: false,
      address: "",
      tableData: [],
    };
  },
  props: {},
  created() {},
  mounted() {
    this.$bus.$on("showAttributePanel", (features) => {
      this.initTabel(features);
    });
  },
  methods: {
    showPanel() {
      this.isShowPanel = true;
    },
    // 单元格双击事件--重点
    cellEdit(row, column) {
      // 将单元格变为输入框
      row.isEdit = true
      // 聚焦到单元格
      setTimeout(() => {
        this.$refs[column.property].focus()
      }, 10)
    },
    // 失去焦点时关闭输入框，即隐藏单元格--重点
    onBlur(row){
      row.isEdit = false;
    },
    initTabel(features) {
      if (features.entities.values.length > 0) {
        this.tableData = [];
        features.entities.values.forEach((f) => {
          this.tableData.push({
            id: f.id,
            unit: "",
            isEdit: false,
            roomnum: "",
          });
        });
      }
    },
  },
};
</script>
<style scoped>
.attributeContainer {
  color: white;
  border-radius: 4px;
  width: 370px;
  height: 500px;
  position: absolute;
  top: 20%;
  right: 350px;
  background: #030829bf;
  overflow: hidden;
  z-index: 2;
}
.tableStyle{
  width: 100%;
  padding:0px 5px,
}
/* .attributeContainer /deep/  .el-table, .el-table__expanded-cell {
    background-color: transparent;
}

.attributeContainer /deep/ .el-table tr {
    background-color: transparent!important;
}
.attributeContainer /deep/  .el-table--enable-row-transition .el-table__body td, .el-table .cell{
    background-color: transparent;
} */
.inputContainer {
  display: flex;
  margin: 10px;
  align-items: center;
}
.addressContainer{
  width: 100%;
}
.title{
  width: 25%;
}
.inputClass{
  width: 75%;
}
</style>