Vue+Element實(shí)現(xiàn)表格單元格編輯

更新時(shí)間：2022年04月12日 10:43:51 作者：TYicor

這篇文章主要為大家詳細(xì)介紹了Vue+Element實(shí)現(xiàn)表格單元格編輯，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

前言

Element的表格組件并沒有給出明確的點(diǎn)擊單個(gè)單元格進(jìn)行的編輯的方案，我仔細(xì)閱讀了官方的文檔后，發(fā)現(xiàn)這個(gè)操作還是可以實(shí)現(xiàn)的。

實(shí)現(xiàn)原理

1、利用Table組件的cell-click屬性，可以獲取當(dāng)前點(diǎn)擊的單元格列對(duì)應(yīng)的Dom元素。
2、清空所有的名為current-cell的class屬性。
3、為當(dāng)前獲取的單元格Dom動(dòng)態(tài)添加名為current-cell的class屬性。
4、控制單元格的input標(biāo)簽的顯示隱藏就能實(shí)現(xiàn)表格的編輯功能。

代碼實(shí)現(xiàn)

<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: '項(xiàng)目名稱', prop: 'itemName', width: '300', key: '100' },
? ? { label: '項(xiàng)目編碼', prop: 'itemCode', width: '150', key: '200' },
? ? { label: '單位', prop: 'compName', width: '150', key: '300', edit: true },
? ? {
? ? ? ? label: '費(fèi)用', prop: '', width: '450', align: 'center', key: '400', children: [
? ? ? ? ? ? { label: '人工費(fèi)', prop: 'staff', width: '150', key: '401', edit: true },
? ? ? ? ? ? { label: '資料費(fèi)', prop: 'material', width: '150', key: '402', edit: true },
? ? ? ? ? ? { label: '場(chǎng)地費(fèi)', 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
}

注意：注意相應(yīng)的樣式不能少，非常重要?。。?/p>

頁(yè)面效果：