vxe-table表格組件,編輯單元格詳解(el-table組件同樣適用)
更新時間：2025年04月24日 10:19:12 作者：lswlovejrd
這篇文章主要介紹了vxe-table表格組件,編輯單元格詳解(el-table組件同樣適用),具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
vxe-table表格組件,編輯單元格(el-table組件同樣適用)
vxe-table官網(wǎng)：https://vxetable.cn/#/table/api
- 效果：
點擊一個單元格時，可編輯該單元格
通過屬性edit-config設置編輯單元格：
<vxe-table
:tableData="tableData"
:columns="columns"
:edit-config="{trigger: 'click', mode: 'cell'}"
>
</vxe-table>trigger：觸發(fā)方式，click為單擊觸發(fā)編輯，dblclick為雙擊觸發(fā)編輯，manual為手動觸發(fā)方式（只能用于 mode=row）mode：編輯模式，cell為單元格編輯模式，row為行編輯模式
另外，還有許多其他屬性可以設置，詳細參見官網(wǎng)
- js部分的代碼：
export default {
data(){
return {
month: "",
tableData:[], //你要寫入的數(shù)據(jù)
columns:[
{field: 'age', title: '年齡',minWidth:90,align:'center',editRender: {name: '$input', props: { type: 'number' },enabled:true}},
],
}
},- 這部分主要的代碼是：
editRender: {name: '$input', props: { type: 'number' },enabled:true}}- 解釋：
name: '$input' //單元格編輯采用輸入框的形式。如果要是需要選擇框的形式，則設置為$option，其它形式同上。
props: { type: 'number' } //以數(shù)字輸入，如果是以文本輸入，則：type: 'text'
enabled:true //是否可編輯總結
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了vue2如何實現(xiàn)vue3的teleport，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了單頁面Vue頁面刷新出現(xiàn)閃爍問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-07-07
解決Element-ui radio單選框label布爾/數(shù)值的一個坑
這篇文章主要介紹了解決Element-ui radio單選框label布爾/數(shù)值的一個坑，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04
深入探討Vue3實現(xiàn)多數(shù)據(jù)變化監(jiān)聽的方式
隨著 Vue 3 的發(fā)布,框架帶來了更多的新特性和增強,其中之一就是 watch 函數(shù)的升級,這一改進使得多個數(shù)據(jù)的變化偵聽更加優(yōu)雅和靈活,本文將深入探討 Vue 3 中的 watch 函數(shù),以及如何以更加優(yōu)雅的方式實現(xiàn)對多個數(shù)據(jù)變化的監(jiān)聽2023-08-08
前端Vue全屏screenfull通用解決方案及原理詳細分析
這篇文章主要給大家介紹了關于前端Vue全屏screenfull通用解決方案及原理的相關資料,使用screenfull這一第三方庫可以實現(xiàn)更穩(wěn)定的全屏功能,需要的朋友可以參考下2024-10-10
在Vue3中可以使用ref函數(shù)來創(chuàng)建一個響應式的變量,通過將ref函數(shù)應用于一個組件實例,我們可以獲取到該組件的實例對象,這篇文章主要給大家介紹了關于vue3?ref獲取組件實例的詳細圖文教程,需要的朋友可以參考下2023-10-10
Element?ui中menu組件(el-menu/el-menu-item/el-submenu/template)
最近在使用Element開發(fā)時遇到了不少問題,下面這篇文章主要給大家介紹了關于Element?ui中menu組件(el-menu/el-menu-item/el-submenu/template)層級結構與用法的相關資料,需要的朋友可以參考下2022-12-12
這篇文章主要為大家詳細介紹了vue的插槽，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-02-02
這篇文章主要為大家介紹了vue項目打包開啟gzip壓縮具體使用方法詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-07-07
在Vue3中使用vue3-print-nb實現(xiàn)前端打印功能
在前端開發(fā)中,經(jīng)常需要打印頁面的特定部分,比如客戶列表或商品詳情頁,要快速實現(xiàn)這些功能,可以使用 vue3-print-nb 插件,本文就給大家介紹了如何在 Vue 3 中使用 vue3-print-nb 實現(xiàn)靈活的前端打印,需要的朋友可以參考下2024-06-06