实现一个可编辑的表格，让用户可以修改表格中的数据，并且能够清楚地看到哪些单元格被修改过。这样的功能可以提高用户体验，也方便后端处理数据的变化。
本文将介绍如何使用Vue.js和Element UI的el-table组件来实现一个可编辑表格，并且修改的单元格会有不同的背景色。
代码实现
首先创建一个el-table组件，给它绑定一个data属性，用来存储表格的数据。给每个el-table-column设置一个prop属性，用来指定每一列对应的数据字段。使用v-for指令来动态生成表格的列，根据一个tableColumn数组，里面存储了每一列的信息，比如label，prop，fixed等。可以给el-table添加一些事件监听，比如cell-mouse-enter，cell-mouse-leave，cell-click等，用来实现鼠标移入移出和点击单元格的效果。代码如下：
<el-table ref="multipleTable" stripe :border=true :data="tableData"
@cell-mouse-enter="handleCellEnter" @cell-mouse-leave="handleCellLeave" @cell-click="handleCellClick"
:cell-style="cellstyle">
<el-table-column width=120 v-for="column in tableColumn" :key="column.aliasColName"
:prop="column.aliasColName" :label="column.text" :fixed="column.fixed">
<div class="item" v-if="column.editStyle == 5"
slot-scope="scope">
<el-input class="item__input" v-model="scope.row[scope.column.property]" placeholder="请输入内容">
<i slot="suffix" class="el-icon-edit" @click="showPwd(scope.row, scope.$index, scope.column)"></i>
</el-input>
<div class="item__txt">{{ scope.row[scope.column.property] }}</div>
</div>
<div class="item" v-else-if="column.editStyle == 22" slot-scope="scope">
<el-select v-model="scope.row[scope.column.property]" placeholder="请选择">
<el-option v-for="item in listArray" :key="item.value" :label="item.display" :value="item.value">
</el-option>
</el-select>
</div>
</el-table-column>
<el-table-column fixed="right" label="操作" width="120" v-if="!visremove">
<div class="item" slot-scope="scope">
<el-popconfirm confirm-button-text='好的' cancel-button-text='取消' icon="el-icon-info" icon-color="red"
title="确定删除吗？" @confirm="removerow(scope.row)">
<el-button slot="reference" type="text" size="small">删除</el-button>
</el-popconfirm>
</div>
</el-table-column>
</el-table>
接下来需要在data中定义一些变量，用来存储表格的数据，列的信息，下拉框的选项，以及一些控制变量，比如clickSwitch，用来记录当前点击的单元格，clickCellMap，用来存储当前点击的单元格的DOM元素，tableDataCopy，用来存储表格数据的副本，用于和修改后的数据进行对比。代码如下：
data() {
return {
tableData: [], //表格数据
tableColumn: [], //表格列信息
listArray: [], //下拉框选项
clickSwitch: { //当前点击的单元格
row: "",
col: ""
},
clickCellMap: [], //当前点击的单元格的DOM元素
tableDataCopy: [], //表格数据的副本
};
},
然后，需要在mounted中调用一个loadtabledata方法，用来加载表格的数据和列的信息。这里使用了一个模拟的数据文件loadData.json，里面存储了表格的数据和列的信息。根据实际的需求，从后端获取数据或者自定义数据。还需要使用JSON.parse和JSON.stringify方法，来创建一个表格数据的副本，用于后续的对比。代码如下：
mounted() {
this.loadtabledata();
},
methods: {
//表格
loadtabledata() {
let resloadtabledata = require("@/artificialdata/loadData.json")
this.tableData = resloadtabledata.data.data
this.tableDataCopy = JSON.parse(JSON.stringify(resloadtabledata.data.data))
},
}
接下来实现一些事件处理的方法，用来实现鼠标移入移出和点击单元格的效果。handleCellEnter方法用来处理鼠标移入单元格的事件。获取当前单元格的column和cell，然后判断是否有prop属性，如果有，说明是可编辑的单元格，就给它的item__txt类添加一个item__txt–hover类，用来显示一个编辑图标，提示用户可以点击编辑。代码如下：
/** 鼠标移入cell */
handleCellEnter(row, column, cell, event) {
const property = column.property
if (property) {
cell.querySelector('.item__txt').classList.add('item__txt--hover')
}
},
然后，需要实现一个handleCellLeave方法，用来处理鼠标移出单元格的事件。需要获取当前单元格的column和cell，然后判断是否有prop属性，如果有，说明是可编辑的单元格，就给它的item__txt类移除一个item__txt–hover类，用来隐藏编辑图标。代码如下：
/** 鼠标移出cell */
handleCellLeave(row, column, cell, event) {
const property = column.property
if (property) {
cell.querySelector('.item__txt').classList.remove('item__txt--hover')
}
},
接下来，实现一个handleCellClick方法，用来处理点击单元格的事件。获取当前单元格的row，column，cell，然后判断是否是同一个单元格，如果是，就不做任何操作，如果不是，就记录当前点击的单元格的信息，存储到clickSwitch变量中。然后，需要判断是否有之前点击的单元格，如果有，就触发它的失焦事件，让它保存数据，并且切换它的显示状态，让它显示文本，隐藏输入框。最后，切换当前点击的单元格的显示状态，让它显示输入框，隐藏文本，并且让输入框获取焦点。代码如下：
/** 点击cell */
handleCellClick(row, column, cell, event) {
if (this.clickSwitch.row == row.id && this.clickSwitch.col == column.property) {
return
}
this.clickSwitch.row = row.id
this.clickSwitch.col = column.property
const property = column.property
// 保存cell
if (this.clickCellMap.length > 0 ) {
this.clickCellMap[0].querySelector('input').blur()
}
if (this.clickCellMap.length > 0) {
this.clickCellMap[0].querySelector('.item__txt').style.display = 'block'
this.clickCellMap[0].querySelector('.item__input').style.display = 'none'
}
this.clickCellMap[0]=cell
cell.querySelector('.item__txt').style.display = 'none'
cell.querySelector('.item__input').style.display = 'block'
cell.querySelector('input').focus()
},
最后实现一个cellstyle方法，用来设置单元格的样式。需要获取当前单元格的row，column，rowIndex，columnIndex，然后判断当前单元格的值是否和表格数据副本中的值相同，如果不同，就说明该单元格被修改过，就给它返回一个背景色的样式，比如"background-color: rgb(144 199 255);"，让它显示为蓝色。这样，用户就可以一眼看出哪些单元格被修改过，哪些没有。代码如下：
cellstyle({ row, column, rowIndex, columnIndex }) {
if (this.tableDataCopy[rowIndex][column.property] != row[column.property]) {
return "background-color: rgb(144 199 255);"
}
},
效果展示
表格中有两种类型的可编辑单元格，一种是输入框，一种是下拉框。当鼠标移入一个可编辑的单元格时，它会显示一个编辑图标，提示可以点击编辑。当点击一个可编辑的单元格时，它会显示一个输入框或者下拉框修改数据。当修改完数据后，按下回车键或者点击其他地方，它会保存数据，并且切换回文本显示。同时可以看到，修改过的单元格会有一个蓝色的背景色，清楚地看到数据的变化。还可以点击右侧的删除按钮，删除一行数据。代码如下：
cellstyle({ row, column, rowIndex, columnIndex }) {
if (this.tableDataCopy[rowIndex][column.property] != row[column.property]) {
return "background-color: rgb(144 199 255);"
}
},
.el-input__icon {
line-height: 24px !important;
}
.el-button--text {
height: 24px;
}
.item {
.el-input--suffix .el-input__inner {
padding-right: 20px;
padding-left: 10px;
}
.el-input__inner {
height: 24px !important;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.item__input {
display: none;
}
.item__txt {
box-sizing: border-box;
border: 1px solid transparent;
width: 100px;
line-height: 24px;
padding: 0 8px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.item__txt--hover {
border: 1px solid #dddddd;
border-radius: 4px;
cursor: text;
}
}
.el-table {
.el-table__cell {
padding: 6px 0 !important;
}
}
