前端 - 单元格内实现可编辑并保存，并实现精准定位到当前点击的单元格？

Question

<el-table          :data="            this.tableData.slice(              (this.currentPage - 1) * this.pagesize,              this.currentPage * this.pagesize            )          "          border          fit          height="500px"          highlight-current-row          style="width: 100%"          @cell-dblclick="cellDblclick"          :row-class-name="tableRowClassName"        >          <el-table-column            v-for="(item, i) in cols"            :key="i"            align="center"            :prop="item.prop"            :label="item.label"          >            <template slot-scope="{row }">              <el-input                v-if="cellDoubleClice"                v-model="row[item.prop]"                ref="input"                  ></el-input>              <span v-else>{{ row[item.prop] }}</span>            </template>          </el-table-column>        </el-table>

 // 遍历出所有表格行的回调函数    tableRowClassName({ row, rowIndex }) {      row.row_index = rowIndex;    },    // 双击事件触发的函数    cellDblclick(row, column, cell, event) {      console.log(event.bubbles);      // if(row.row_index)      this.cellDoubleClice = event.bubbles;    },

实现效果：

如何实现精准定位到当前点击的单元格，并且只有后面四个字段可编辑。

Answer 1

要实现精准定位到当前点击的单元格，您可以使用 el-table 组件的 @row-click 事件。该事件会在用户点击某一行时触发，可以获取到点击的行的数据。

同时，为了实现只有后面四个字段可编辑，您可以在 el-table-column 中使用 v-if 判断语句，仅在需要编辑时显示 el-input 组件，否则显示 span。

以下是代码示例：

<el-table  :data="tableData"  border  fit  height="500px"  highlight-current-row  style="width: 100%"  @row-click="handleRowClick">  <el-table-column    v-for="(item, i) in columns"    :key="i"    align="center"    :prop="item.prop"    :label="item.label"  >    <template slot-scope="{ row }">      <el-input        v-if="item.prop === 'field1' || item.prop === 'field2' || item.prop === 'field3' || item.prop === 'field4'"        v-model="row[item.prop]"        ref="input"      ></el-input>      <span v-else>{{ row[item.prop] }}</span>    </template>  </el-table-column></el-table>

在您的 Vue 实例中，添加以下方法：

data() {  return {    tableData: [...], //您的表格数据    columns: [...], //您的表格列配置  };},methods: {  handleRowClick(row, column, cell, event) {    console.log(event.bubbles);    const { row_index } = row; //获取行索引    // 在这里可以进行您需要的操作，例如将选中的行存储到另一个变量中，或者在编辑模式下进行其他操作。  },},