element table表格点击单元格实现编辑

一：在行数据中设置一个属性，用来区分当前行或者当前列是否在进行修改，使用v-if实现

<el-table
        :data="dataDetail.judgmentLetterDets"
        :row-class-name="tableRowClassName"
        border
        style="width: 100%"
        max-height="500px"
        @cell-click="tabClick">
        <el-table-column
          prop="reason"
          label="原因说明"
          align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.index === tabClickIndex && tabClickLabel === '原因说明'">
              <el-input v-model="scope.row.reason" maxlength="300" placeholder="请输入原因" size="mini" @blur="inputBlur"/>
            </span>
            <span v-else>{{ scope.row.reason }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="judgmentAmount"
          label="判责金额(元)"
          width="120px"
          align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.index === tabClickIndex && tabClickLabel === '判责金额(元)'">
              <el-input
                v-model="scope.row.judgmentAmount"
                :blur="inputBlur"
                placeholder="请输入判责金额"
                size="mini"
                @blur="inputBlur"/>
            </span>
            <span v-else>{{ scope.row.judgmentAmount | fmoney }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="remark" label="备注" align="center" width="180">
          <template slot-scope="scope">
            <span v-if="scope.row.index === tabClickIndex && tabClickLabel === '备注'">
              <el-input v-model="scope.row.remark" maxlength="300" placeholder="请输入备注" size="mini" @blur="inputBlur"/>
            </span>
            <span v-else>{{ scope.row.remark }}</span>
          </template>
        </el-table-column>
      </el-table>
// js
data() {
    return {
        tabClickIndex: null, // 点击的单元格
        tabClickLabel: '', // 当前点击的列名
    }
},
methods: {
   tableRowClassName({ row, rowIndex }) {
      // 把每一行的索引放进row
      row.index = rowIndex
   },
   // 添加明细原因 row 当前行 column 当前列
    tabClick(row, column, cell, event) {
      switch (column.label) {
        case '原因说明':
          this.tabClickIndex = row.index
          this.tabClickLabel = column.label
          break
        case '判责金额(元)':
          this.tabClickIndex = row.index
          this.tabClickLabel = column.label
          break
        case '备注':
          this.tabClickIndex = row.index
          this.tabClickLabel = column.label
          break
        default: return
      }
      console.log('添加明细原因', this.tabClickIndex, row, column, cell, event)
    },
    // 失去焦点初始化
    inputBlur(row, event, column) {
      this.tabClickIndex = null
      this.tabClickLabel = ''
    },
}

二、使用el-table自带的class来判断是否显示输入框，主要使用css实现

1，el-table需要添加highlight-current-row=“true”，这样在点击某一行时，会将其设置为选中状态，并在dom节点上添加current-row类,
2，如果需要清除或者变更某一行的选中状态，则使用el-table本身的setCurrentRow方法，细节见官方文档

<template>
  <div>
    <el-button @click="ok" type="success">确认</el-button>
    <el-table :data="list" highlight-current-row ref="mytb">
      <el-table-column align="center" label="编号" width="80">
        <template slot-scope="{ row }">
          <span>{{ row.id }}</span>
          <el-input v-model="row.id"></el-input>
        </template>
      </el-table-column>
 
      <el-table-column width="180px" label="名称">
        <template slot-scope="{ row }">
          <span>{{ row.name }}</span>
          <el-input v-model="row.name"></el-input>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
 
<script>
export default {
  name: "growth",
  data() {
    return {
      list: [
        { id: "1", name: "法外狂徒" },
        { id: "2", name: "张三" },
      ],
    };
  },
  methods: {
    ok() {
      this.$refs.mytb.setCurrentRow();
    },
  },
};
</script>
 
<style lang="scss" scoped>
.el-table {
  // 默认情况下，即没有选中某一行时，只显示span
  span {
    display: block;
  }
  .el-input {
    display: none;
  }
  // 当点击某一行时，对应的行会添加current-row类，则内部的新的样式会生效
  .current-row {
    span {
      display: none;
    }
    .el-input {
      display: block;
    }
  }
}
</style>

三:两种方法的比较

1,方法1比较灵活，可以精准控制到每一个行的每一个列，但是要多写一些v-show和对应的变更方法。
2,方法2代码简单，编写好css，基本不需要在html中注意这部分的操作，但是相对的不灵活一些，一次性控制一整行，无法控制到列