?

?

<template><el-table@cell-click="tableCellClick":cell-class-name="({ row, column, rowIndex, columnIndex }) => ((row.index = rowIndex), (column.index = columnIndex))":data="tableData"><!-- 點擊表格可以編輯■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ --><el-table-column label="labelName" align="center" show-overflow-tooltip><template slot-scope="scope"><spanv-if="scope.row.index === tableCellClickRowIndex &&scope.column.index === tableCellClickColumnIndex"><el-inputplaceholder="請輸入內容…"v-model="scope.row.labelName"@blur="tableCellInputBlur"size="mini"autofocus/></span><span v-else>{{ scope.row.labelName }}</span></template></el-table-column></el-table>
</template><script>
export default {data() {return {// 點擊表格可以編輯■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■tableCellClickRowIndex: null, // 點擊的單元格行索引tableCellClickColumnIndex: null, // 點擊的單元格列索引tableData: [{labelName: "可以編輯的文本內容1",},{labelName: "可以編輯的文本內容2",},{labelName: "可以編輯的文本內容3",},],};},methods: {// 點擊表格可以編輯■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■tableCellClick(row, column, cell, event) {this.tableCellClickRowIndex = row.index;this.tableCellClickColumnIndex = column.index;},// 單元格失去焦點tableCellInputBlur(row, event, column) {this.tableCellClickRowIndex = null;this.tableCellClickColumnIndex = null;},},
};
</script>

總結

以上是生活随笔為你收集整理的【技巧】实现饿了么Element UI的table单击（点击）编辑单元格内容的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。