Vue+Element实现表格单元格编辑

前言

Element的表格组件并没有给出明确的点击单个单元格进行的编辑的方案，我仔细阅读了官方的文档后，发现这个操作还是可以实现的。

实现原理

1、利用Table组件的cell-click属性，可以获取ZRqivdxCsw当前点击的单元格列对应的Dom元素。
2、清空所有的名为current-cell的class属性。
3、为当前获取的单元格Dom动态添加名为current-cell的class属性。
4、控制单元格的input标签的显示隐藏就能实现表格的编辑功能。

代码实现

<template> <div class="tableDiv">  <el-table :data="tableData" highlight-current-row @cell-click="cellClick">   <el-table-column    v-for="(item, index) in tableColumn"    :key="index"    :prop="item.prop"    :label="item.label"    :width="item.width"   >    <template slot-scope="scope">     <el-input      v-if="item.edit"      size="small"      ref="tableInput"      v-model="scope.row[item.prop]"      @blur="removeClass"      @change="handleEdit(item.prop, scope.$index, scope.row)"     ></el-input>     <span>{{ scope.row[item.prop] }}</span>    </template>    <el-table-column     v-for="(itemchild, indexchild) in item.children"     :key="indexchild"     :prop="itemchild.prop"     :label="itemchild.label"     :width="itemchild.width"    >     <template slot-scope="scope">      <el-input       v-if="itemchild.edit"       size="small"       ref="tableInput"       v-model="scope.row[itemchild.prop]"       @blur="removeClass"       @change="handleEdit(itemchild.prop, scope.$index, scope.row)"      ></el-input>      <span>{{ scope.row[itemchild.prop] }}</span>     </template>    </el-table-column>   </el-table-column>  </el-table> </div></template><script>import { Column, tableData } from "./tablewww.easck.comColumn";export default { data() {  return {   tableData: tableData,   tableColumn: Column  }; }, methods: {  handleEdit() {},  cellClick(row, column, cell, event) {   for(let i=0;i<document.getElementsByClassName('current-cell').length;i++){    document.getElementsByClassName('current-cell')[i].classList.remove('current-cell');   }   cell.classList.add("current-cell");  },  removeClass(){   document.getElementsByClassName(www.easck.com'current-cell')[0].classList.remove('current-cell');  } }};</script><style scoped>.tableDiv .el-input { display: none;}.current-cell .el-input { display: block;}.current-cell .el-input + span { display: none;}</style>

tableColumn.js文件

const Column = [  { label: '项目名称', prop: 'itemName', width: '300', key: '100' },  { label: '项目编码', prop: 'itemCode', width: '150', key: '200' },  { label: '单位', prop: 'compName', width: '150', key: '300', edit: true },  {    label: '费用', prop: '', width: '450', align: 'center', key: '400', children: [      { label: '人工费', prop: 'staff', width: '150', key: '401', edit: true },      { label: '资料费', prop: 'material', width: '150', key: '402', edit: true },      { label: '场地费', prop: 'site', width: '150', key: '403' }    www.easck.com]  }];const tableData = [  { itemName: "北京水立方", itemCode: "1351157698", compName: "北京", staff: "100", material: "84547", site: "6544", sort: 1 },  { itemName: "北京水立方", itemCode: "1351157698", compName: "北京", staff: "100", material: "84547", site: "6544", sort: 2 },  { itemName: "北京水立方", itemCode: "1351157698", compName: "北京", staff: "100", material: "84547", site: "6544", sort: 3 },  { itemName: "北京水立方", itemCode: "1351157698", compName: "北京", staff: "100", material: "84547", site: "6544", sort: 4 },  { itemName: "北京水立方", itemCode: "1351157698", compName: "北京", staff: "100", material: "84547", site: "6544ZRqivdxCsw", sort: 5 },  { itemName: "北京水立方", itemCode: "1351157698", compName: "北京", staff: "100", material: "84547", site: "6544", sort: 6 },  { itemName: "北京水立方", itemCode: "1351157698", compName: "北京", staff: "100", material: "84547", site: "6544", sort: 7 },  { itemName: "北京水立方", itemCode: "1351157698", compName: "北京", staff: "100", material: "84547", site: "6544", sort: 8 },  { itemName: "北京水立方", itemCode: "1351157698", compName: "北京", staff: "100", material: "84547", site: "6544", sort: 9 },  { itemName: "北京水立方", itemCode: "1351157698", compName: "北京", staff: "100", material: "84547", site: "6544", sort: 10 }]export {  Column, tableData}

注意：注意相应的样式不能少，非常重要！！！

页面效果：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。