ElementPlus?Table表格實現(xiàn)可編輯單元格
更新時間：2024年12月18日 08:57:56 作者：今晚噠老虎
本文主要介紹了ElementPlus?Table表格實現(xiàn)可編輯單元格,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
通過基礎(chǔ)的Table表格來實現(xiàn)單元格內(nèi)容的可編輯
1.首先定位到需要編輯的列，替換el-table-column
<el-table-column label="Editable Column" width="300">
<template #default="{ row, column, $index }">
<el-input
size="small"
v-if="
tableRowEditId === row.id &&
tableColumnEditIndex === column.id
"
v-model="row.taskId"
@blur="blurUnitInput(row, column)"
@keyup.enter="blurUnitInput(row, column)"
/>
<span v-else class="hover-border">{{ row.taskId }}</span>
</template>
</el-table-column>2.el-table 標(biāo)簽下面增加 cell-click 事件，當(dāng)某個單元格被點擊時會觸發(fā)該事件
<el-table :data="tableData" border style="width: 100%" @cell-click="showUnitInput">
<el-table-column prop="date" label="Date" width="180" />
<el-table-column prop="name" label="Name" width="180" />
<el-table-column label="Editable Column" width="300">
<template #default="{ row, column, $index }">
<el-input
size="small"
v-if="
tableRowEditId === row.id &&
tableColumnEditIndex === column.id
"
v-model="row.taskId"
@blur="blurUnitInput(row, column)"
@keyup.enter="blurUnitInput(row, column)"
/>
<span v-else class="hover-border">{{ row.taskId }}</span>
</template>
</el-table-column>
</el-table>3. 增加標(biāo)識變量、事件方法，可以在 blurUnitInput 方法里面實現(xiàn)修改的接口
const tableRowEditId = ref()
const tableColumnEditIndex = ref()
const showUnitInput = (row: any, column: any) => {
// console.log('row', row)
// console.log('column', column)
//賦值給定義的變量
tableRowEditId.value = row.id //確定點擊的單元格在哪行 如果數(shù)據(jù)中有ID可以用ID判斷，沒有可以使用其他值判斷，只要能確定是哪一行即可
tableColumnEditIndex.value = column.id //確定點擊的單元格在哪列
}
const blurUnitInput = (row: { [x: string]: boolean }, column: any) => {
tableRowEditId.value = null
tableColumnEditIndex.value = null
//在此處調(diào)接口傳數(shù)據(jù)
console.log(row)
console.log(column)
}4.增加一個樣式，使可編輯的單元格鼠標(biāo)懸停時顯示虛線邊框
.hover-border {
border: none; /* 默認(rèn)無邊框 */
}
.hover-border:hover {
border: 1px dotted #165DFF; /* 鼠標(biāo)懸停時顯示虛線邊框 */
padding: 2px;
}到此這篇關(guān)于ElementPlus Table表格實現(xiàn)可編輯單元格的文章就介紹到這了,更多相關(guān)ElementPlus Table可編輯單元格內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
您可能感興趣的文章:
- Element?UI/Plus中全局修改el-table默認(rèn)樣式的解決方案
- vue3 elementplus table合并寫法
- Vue3中Element Plus Table(表格)點擊獲取對應(yīng)id方式
- vue3+elementplus基于el-table-v2封裝公用table組件詳細(xì)代碼
- vue3+element Plus實現(xiàn)在table中增加一條表單數(shù)據(jù)的示例代碼
- vue3使用elementPlus進行table合并處理的示例詳解
- vue3使用element-plus再次封裝table組件的基本步驟
- Vue3+Element-Plus使用Table預(yù)覽圖片發(fā)生元素遮擋的解決方法
- element-plus的el-table自定義表頭篩選查詢功能實現(xiàn)
- vue3?element?plus?table?selection展示數(shù)據(jù),默認(rèn)選中功能方式
相關(guān)文章
這篇文章主要介紹了vue組件開發(fā)props驗證的實現(xiàn)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-02-02
本文主要介紹了vue樣式穿透的幾種方式，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-06-06
vue如何實現(xiàn)el-select下拉選項的懶加載
這篇文章主要介紹了vue如何實現(xiàn)el-select下拉選項的懶加載，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
本篇文章主要介紹了分享一個精簡的vue.js 圖片lazyload插件實例。非常具有實用價值，需要的朋友可以參考下。2017-03-03
這篇文章主要為大家詳細(xì)介紹了Vue實現(xiàn)簡單圖片切換效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-06-06
這篇文章主要介紹了vue父組件異步獲取數(shù)據(jù)傳給子組件,需要的朋友可以參考下2018-07-07
使用自動導(dǎo)入后eslint報錯eslint9的問題及解決方法
本文介紹了使用`pnpm create vue@latest`創(chuàng)建Vue應(yīng)用時,如何配置ESLint和Prettier,包括解決兩者沖突以及自動導(dǎo)入后Eslint報錯的問題,感興趣的朋友一起看看吧2025-03-03
為vue中的data賦值computed計算屬性后,出現(xiàn)undefined原因及解決
這篇文章主要介紹了為vue中的data賦值computed計算屬性后,出現(xiàn)undefined原因及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-07-07
理解Proxy及使用Proxy實現(xiàn)vue數(shù)據(jù)雙向綁定操作
這篇文章主要介紹了理解Proxy及使用Proxy實現(xiàn)vue數(shù)據(jù)雙向綁定操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
vue axios調(diào)用接口方法報錯500 internal server err
前端使用axios 訪問后端接口時報錯,在瀏覽器中點擊紅色的報錯數(shù)據(jù),本文給大家分享vue axios調(diào)用接口方法報錯500 internal server error的兩種解決方法,感興趣的朋友一起看看吧2023-10-10