vue-table實現新增和刪除

阿新 • • 發佈：2021-05-18

本文例項為大家分享了vue-table實現新增和刪除的具體程式碼，供大家參考，具體內容如下

一.程式碼

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>vue-table示例</title>
    <style>
        .table_box {
            height: auto;
            width: 90%;
            margin: 5% auto;
        }

        .table {
            border-collapse:http://www.cppcns.com 
 collapse;
            width: 100%;
            height: auto;
        }

        h1 {
            text-align: center;
        }
    </style>
</head>
<body>
<div id="app">
    <div class="table_box">
        <h1>表格練習</h1>
        <input type="PnQuXZwdtext" v-model="text"/>
        <button @click="add">新增</button>
        <table class="table" border="1">
            <thead>
            <tr>
                <th>序號</th>
                <th>品牌</th>
                <th>時間</th>
                <th>操作</th>
            </tr>

            </thead>
            <tbody>
            &lwww.cppcns.com 
t;tr v-for="(v,k) in list" :key="k">
                <th>{{v.id}}</th>
                <th>{{v.name}}</th>
                <th>{{v.tiwww.cppcns.comme}}</th>
                <th>
                    <a href="#" @click.prevent="del(k)">刪除</a>
                </th>
            </tr>
            </tbody>
        </table>
    </div>

</div>
</body>
</html>
<script src="https://cdn. 
jsdelivr.net/npm/vue"></script>
<script>

    var vm = new Vue({
        el: '#app',data: {
            num: 1,list: [],text: '',},methods: {
            add: function () {
                this.list.unshift({
                    "id": this.num++,"name": this.text,"time": new Date().toLocaleString(),});
            },del: function (index) {
                if (confirm("請問您是否確定刪除當前行")) {
                    th程式設計客棧is.list.splice(index,1);
                }

            },}
    });
</script>

二.執行效果

vue-table實現新增和刪除

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。

vue-table實現新增和刪除

本文例項為大家分享了vue-table實現新增和刪除的具體程式碼，供大家參考，具體內容如下

vue-iview動態新增和刪除的方法

本文例項為大家分享了vue-iview動態新增和刪除的具體程式碼，供大家參考，具體內容如下

vue+elementui 實現新增和修改共用一個彈框的完整程式碼

element-ui是由餓了麼前端團隊推出的一套為開發者、設計師和產品經理準備的基於vue.js 2.0的桌面元件庫，而手機端有對應框架是 Mint UI 。整個ui風格簡約，很實用，同時也極大的提高了開發者的效率，是一個非常受歡迎

Vue Element-ui Table實現動態新增和刪除

Vue Element-ui Table實現動態新增和刪除達到效果：1.點選新增動態新增一行表格資料 2.點選移除刪除一行

vue 實現在同一介面實現元件的動態新增和刪除功能

1.插入靜態元件，將自己想要迴圈的元件顯示在頁面上，利用v-for進行迴圈操作，操作包括增刪。

vue iview實現動態新增和刪除

本文例項為大家分享了vue iview動態新增和刪除的具體程式碼，供大家參考，具體內容如下

JavaScript實現手機號碼 3-4-4格式並控制新增和刪除時游標的位置

JavaScript實現手機號碼 3-4-4格式手機號實現3-4-4格式相對來說還是比較簡單的，監聽input事件，實時的獲取手機號碼，然後根據手機號碼的長度做擷取和拼接的操作，即可實現手機格式的處理，實現格式的處理之後，我們

Python 列表中的修改、新增和刪除元素的實現

本文介紹的是列表中的修改、新增和刪除元素。第一次寫部落格，如果本文有什麼錯誤，還請大家評論指正。謝謝！

jq實現點選新增和刪除一行

廢話不多說，直接上程式碼 <!DOCTYPE html><head><meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\" /><title>jq實現點選新增和刪除一行</title><script s

React實現評論的新增和刪除

本文例項為大家分享了Android九宮格圖片展示的具體程式碼，供大家參考，具體內容如下

Antd-vue Table元件新增Click事件,實現點選某行資料教程

給Table元件新增Click事件,實現點選某行資料操作 customRow 設定行屬性 Function(record,index)

C語言陣列新增和刪除元素的實現

陣列不擅長插入（新增）和刪除元素。陣列的優點在於它是連續的，所以查詢資料速度很快。但這也是它的一個缺點。正因為它是連續的，所以當插入一個元素時，插入點後所有的元素全部都要向後移；而刪除一個元素時，刪除

js動態實現表格新增和刪除操作

本文例項為大家分享了js動態實現表格新增和刪除的具體程式碼http://www.cppcns.com，供大家參考，具體內容如下

JavaScript實現動態新增和刪除表格

最近複習網頁的三大元件,就記錄一下寫的一些程式碼片段本篇介紹瞭如何使用JavaScript來初步實現表格的動態新增和刪除，較為簡單，非常適合新手學習

python 列表、字典和集合的新增和刪除操作

在python中，元組不可變，只能查詢不能修改，列表、字典和集合的基本操作，各不相同，下面就來比較一下它們的新增和刪除操作吧。

Java 新增和刪除PDF圖層的示例程式碼

在PDF文件中，圖層可以使部分內容選擇性地被隱藏或顯示。通過新增圖層，我們可以將文字、圖片、表格等元素精確定位於頁面指定位置，並可將這些元素進行疊放、組合形成頁面的最終效果。本文將介紹如何使用Spire.PDF f

Maven專案學習筆記（四）SSM專案利用《form:form》標籤在Mysql資料庫中實現新增和修改資料

近期自己搞好了系統的新增、修改、條件查詢的功能了，折騰了幾天，主要是新增修改的業務判斷比較多，導致那個負責修改的控制器程式碼加註釋都170多行，真第一次遇見這種情況。最後還是能實現對應的功能了

微信小程式動態新增和刪除元件的現實

一、基本思路 1、通過改變陣列長度動態增刪元件 <block wx:for=\"{{陣列}}\"> 元件

win10系統新增和刪除輸入法的操作方法

微軟已經停止了更新win7系統，迫使越來越多人給電腦安裝上win10系統，安裝後發現輸入法不是自己經常使用的那款，自帶的是微軟輸入法。於是，想要設定一款滿意的輸入法，但怎麼設定都無法成功，怎麼辦？今天小編和大家

操作表格示例---新增和刪除表格內容

程式碼 <!DOCTYPE html> <html lang=\"en\"> <head> <meta charset=\"UTF-8\"> <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">