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

前言

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

实现原理

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

代码实现

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
}

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

页面效果：

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