Vue表格单元格编辑
TYicor 人气:0前言
Element的表格组件并没有给出明确的点击单个单元格进行的编辑的方案，我仔细阅读了官方的文档后，发现这个操作还是可以实现的。
实现原理
1、利用Table组件的cell-click属性，可以获取当前点击的单元格列对应的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 "./tableColumn";
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('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' }
]
}
];
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: "6544", 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
}注意：注意相应的样式不能少，非常重要！！！
页面效果：
加载全部内容