vxe-table表格組件,編輯單元格詳解(el-table組件同樣適用)

更新時(shí)間：2025年04月24日 10:19:12 作者：lswlovejrd

這篇文章主要介紹了vxe-table表格組件,編輯單元格詳解(el-table組件同樣適用),具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

vxe-table表格組件,編輯單元格(el-table組件同樣適用)

vxe-table官網(wǎng)：https://vxetable.cn/#/table/api

效果：

點(diǎn)擊一個(gè)單元格時(shí)，可編輯該單元格

通過(guò)屬性edit-config設(shè)置編輯單元格：

       <vxe-table
            :tableData="tableData"
            :columns="columns"
            :edit-config="{trigger: 'click', mode: 'cell'}"
        >
        </vxe-table>

trigger：觸發(fā)方式，click為單擊觸發(fā)編輯，dblclick為雙擊觸發(fā)編輯，manual為手動(dòng)觸發(fā)方式（只能用于 mode=row）
mode：編輯模式，cell為單元格編輯模式，row為行編輯模式

另外，還有許多其他屬性可以設(shè)置，詳細(xì)參見(jiàn)官網(wǎng)

js部分的代碼：

export default {
    data(){
        return {
            month: "",
            tableData:[],  //你要寫(xiě)入的數(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}}

解釋?zhuān)?/li>

name: '$input' //單元格編輯采用輸入框的形式。如果要是需要選擇框的形式，則設(shè)置為$option，其它形式同上。
props: { type: 'number' } //以數(shù)字輸入，如果是以文本輸入，則：type: 'text'
enabled:true //是否可編輯

總結(jié)

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

Vue實(shí)現(xiàn)剪貼板復(fù)制功能
這篇文章主要介紹了Vue實(shí)現(xiàn)剪貼板復(fù)制功能,本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2019-12-12
vue-amap安裝和用法步驟
vue-amap是餓了么開(kāi)源的一套基于?Vue?2.0?和高德地圖的地圖組件。接下來(lái)通過(guò)本文給大家介紹vue-amap安裝和使用,需要的朋友可以參考下
2021-12-12
Vue3?封裝擴(kuò)展并簡(jiǎn)化Vuex在組件中的調(diào)用問(wèn)題
這篇文章主要介紹了Vue3?封裝擴(kuò)展并簡(jiǎn)化Vuex在組件中的調(diào)用,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2023-01-01
vue如何使用vue slot封裝公共組件
這篇文章主要介紹了vue如何使用vue slot封裝公共組件，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-05-05
uniapp中如何基于vue3實(shí)現(xiàn)輸入驗(yàn)證碼功能
本文介紹了如何使用uniapp和vue3創(chuàng)建一個(gè)手機(jī)驗(yàn)證碼輸入框組件,通過(guò)封裝VerificationCodeInput.vue組件,并在父組件中引入,可以實(shí)現(xiàn)驗(yàn)證碼輸入功能,適合需要增加手機(jī)驗(yàn)證碼驗(yàn)證功能的開(kāi)發(fā)者參考使用
2024-09-09
Vue父子傳遞實(shí)例講解
在本篇文章里小編給大家整理的是關(guān)于Vue父子傳遞實(shí)例講解，需要的朋友們可以跟著學(xué)習(xí)參考下。
2020-02-02
vue3+vite使用環(huán)境變量.env的一些配置情況詳細(xì)說(shuō)明
開(kāi)發(fā)中經(jīng)常會(huì)使用環(huán)境變量,Vite相比于Webpack也有一定的變化,下面這篇文章主要給大家介紹了關(guān)于vue3+vite使用環(huán)境變量.env的一些配置情況說(shuō)明的相關(guān)資料,需要的朋友可以參考下
2022-12-12
詳解Vue路由開(kāi)啟keep-alive時(shí)的注意點(diǎn)
這篇文章主要介紹了詳解Vue路由開(kāi)啟keep-alive時(shí)的注意點(diǎn)，非常具有實(shí)用價(jià)值，有興趣的朋友可以了解一下
2017-06-06
詳解給Vue2路由導(dǎo)航鉤子和axios攔截器做個(gè)封裝
本篇文章主要介紹了詳解給Vue2路由導(dǎo)航鉤子和axios攔截器做個(gè)封裝，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-04-04
vue.js修改el-popover組件顯示位置
el-popover是一個(gè)基于element-ui框架設(shè)計(jì)的,用于浮動(dòng)展示提示或菜單的UI組件,下面這篇文章主要給大家介紹了關(guān)于vue.js修改el-popover組件顯示位置的相關(guān)資料,需要的朋友可以參考下
2023-06-06