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
- 效果：
點(diǎn)擊一個單元格時，可編輯該單元格
通過屬性edit-config設(shè)置編輯單元格：
<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為行編輯模式
另外，還有許多其他屬性可以設(shè)置，詳細(xì)參見官網(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' //單元格編輯采用輸入框的形式。如果要是需要選擇框的形式，則設(shè)置為$option，其它形式同上。
props: { type: 'number' } //以數(shù)字輸入，如果是以文本輸入，則：type: 'text'
enabled:true //是否可編輯總結(jié)
以上為個人經(jīng)驗(yàn)，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了Vue實(shí)現(xiàn)剪貼板復(fù)制功能,本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值，需要的朋友可以參考下2019-12-12
vue-amap是餓了么開源的一套基于?Vue?2.0?和高德地圖的地圖組件。接下來通過本文給大家介紹vue-amap安裝和使用,需要的朋友可以參考下2021-12-12
Vue3?封裝擴(kuò)展并簡化Vuex在組件中的調(diào)用問題
這篇文章主要介紹了Vue3?封裝擴(kuò)展并簡化Vuex在組件中的調(diào)用,本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-01-01
這篇文章主要介紹了vue如何使用vue slot封裝公共組件，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-05-05
uniapp中如何基于vue3實(shí)現(xiàn)輸入驗(yàn)證碼功能
本文介紹了如何使用uniapp和vue3創(chuàng)建一個手機(jī)驗(yàn)證碼輸入框組件,通過封裝VerificationCodeInput.vue組件,并在父組件中引入,可以實(shí)現(xiàn)驗(yàn)證碼輸入功能,適合需要增加手機(jī)驗(yàn)證碼驗(yàn)證功能的開發(fā)者參考使用2024-09-09
在本篇文章里小編給大家整理的是關(guān)于Vue父子傳遞實(shí)例講解，需要的朋友們可以跟著學(xué)習(xí)參考下。2020-02-02
vue3+vite使用環(huán)境變量.env的一些配置情況詳細(xì)說明
開發(fā)中經(jīng)常會使用環(huán)境變量,Vite相比于Webpack也有一定的變化,下面這篇文章主要給大家介紹了關(guān)于vue3+vite使用環(huán)境變量.env的一些配置情況說明的相關(guān)資料,需要的朋友可以參考下2022-12-12
詳解Vue路由開啟keep-alive時的注意點(diǎn)
這篇文章主要介紹了詳解Vue路由開啟keep-alive時的注意點(diǎn)，非常具有實(shí)用價值，有興趣的朋友可以了解一下2017-06-06
詳解給Vue2路由導(dǎo)航鉤子和axios攔截器做個封裝
本篇文章主要介紹了詳解給Vue2路由導(dǎo)航鉤子和axios攔截器做個封裝，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-04-04
el-popover是一個基于element-ui框架設(shè)計(jì)的,用于浮動展示提示或菜單的UI組件,下面這篇文章主要給大家介紹了關(guān)于vue.js修改el-popover組件顯示位置的相關(guān)資料,需要的朋友可以參考下2023-06-06