快捷導(dǎo)航

vue3+element Plus實(shí)現(xiàn)在table中增加一條表單數(shù)據(jù)的示例代碼

更新時(shí)間：2024年01月19日 11:07:13 作者：清茶煮酒xin

這篇文章主要介紹了vue3+element Plus實(shí)現(xiàn)在table中增加一條表單數(shù)據(jù)的操作,本文通過(guò)示例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧

1. 先上效果圖

在這里插入圖片描述

2. 代碼實(shí)現(xiàn)

<el-table v-loading="loading" :data="tableData" row-key="id">
      <el-table-column property="id" label="序號(hào)"></el-table-column>
      <el-table-column property="name" label="姓名">
        <template #default="scope">
          <el-input v-if="!scope.row.id" v-model="scope.row.name"></el-input>
          <span v-else>{{ scope.row.name }}</span>
        </template>
      </el-table-column>
      <el-table-column property="number" label="年齡">
        <template #default="scope">
          <el-input v-if="!scope.row.id" v-model="scope.row.number"></el-input>
          <span v-else>{{ scope.row.number }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" fixed="right" align="center" width="200">
        <template #default="scope">
          <el-button type="primary" size="small" v-if="!scope.row.id"  @click.stop="handleSave(scope.row)">保存</el-button>
          <el-button type="danger" size="small" v-if="scope.row.id" @click.stop="handleDelete(scope.row.id)">刪除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="bottom-btn">
      <el-button type="success" @click="addLineData()">添加一行</el-button>
    </div>

ts 實(shí)現(xiàn)

/**添加一行數(shù)據(jù) */
function addLineData() {
  const newData = {
    name: '',
    number: '',
  };
  tableData.value.push(newData);
}
/** */
function handleDelete() {
  ElMessageBox.confirm("確認(rèn)刪除該條數(shù)據(jù)?", "警告", {
    confirmButtonText: "確定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(() => {
    //調(diào)用自己的接口啦！
    // 當(dāng)然啦，如果全都是自己增加的未提交的數(shù)據(jù)，可以使用splice 方法來(lái)處理哦！
  });
}

當(dāng)前情況呢是適用于單條數(shù)據(jù)新增，并且直接操作數(shù)據(jù)庫(kù)的

到此這篇關(guān)于vue3+element Plus實(shí)現(xiàn)在table中增加一條表單數(shù)據(jù)的文章就介紹到這了,更多相關(guān)vue3 element Plus增加表單數(shù)據(jù)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

Vue3?中的??shallowReactive?詳解
本文深入探討了Vue3中新特性shallowReactive的使用和原理,shallowReactive是創(chuàng)建淺響應(yīng)式對(duì)象的API,只對(duì)對(duì)象的第一層屬性進(jìn)行響應(yīng)式轉(zhuǎn)換,不對(duì)嵌套對(duì)象處理,有助于性能優(yōu)化和狀態(tài)管理,同時(shí)也指出了shallowReactive在使用中的注意事項(xiàng)
2024-10-10
vue搭建本地JSON靜態(tài)數(shù)據(jù)服務(wù)器全過(guò)程
這篇文章主要介紹了vue搭建本地JSON靜態(tài)數(shù)據(jù)服務(wù)器全過(guò)程,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-07-07
Vuex模塊化實(shí)現(xiàn)待辦事項(xiàng)的狀態(tài)管理
本文主要介紹了Vuex模塊化實(shí)現(xiàn)待辦事項(xiàng)的狀態(tài)管理的相關(guān)知識(shí)，具有很好的參考價(jià)值，下面跟著小編一起來(lái)看下吧
2017-03-03
利用Vite搭建Vue3+ElementUI-Plus項(xiàng)目的全過(guò)程
vue3如今已經(jīng)成為默認(rèn)版本了,相信大多數(shù)公司已經(jīng)全面擁抱vue3了,下面這篇文章主要給大家介紹了關(guān)于利用Vite搭建Vue3+ElementUI-Plus項(xiàng)目的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2022-07-07
在vue中實(shí)現(xiàn)echarts隨窗體變化
這篇文章主要介紹了在vue中實(shí)現(xiàn)echarts隨窗體變化，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2020-07-07
解讀vue項(xiàng)目防范XSS攻擊問(wèn)題
這篇文章主要介紹了解讀vue項(xiàng)目防范XSS攻擊問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-01-01
vue實(shí)現(xiàn)將一個(gè)數(shù)組內(nèi)的相同數(shù)據(jù)進(jìn)行合并
今天小編就為大家分享一篇vue實(shí)現(xiàn)將一個(gè)數(shù)組內(nèi)的相同數(shù)據(jù)進(jìn)行合并，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2019-11-11
vue transition的延時(shí)播放實(shí)踐過(guò)程
文章介紹了如何使用JavaScript的`setTimeout`和Vue.js的`v-show`指令實(shí)現(xiàn)頁(yè)面自動(dòng)播放,并通過(guò)CSS的`transition`和`animation`屬性控制動(dòng)畫的播放時(shí)間
2025-12-12
VUE2 前端實(shí)現(xiàn) 靜態(tài)二級(jí)省市聯(lián)動(dòng)選擇select的示例
下面小編就為大家分享一篇VUE2 前端實(shí)現(xiàn) 靜態(tài)二級(jí)省市聯(lián)動(dòng)選擇select的示例。具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2018-02-02
詳解Vue-Router的安裝與使用
Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，讓構(gòu)建單頁(yè)面應(yīng)用變得易如反掌。本文介紹下Vue Router的安裝與使用
2021-06-06