vue.js動態表格增刪改代碼


新建一個html文件,內容如下:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>form</title>

    <script type="text/javascript" src="js/vue.min.js"></script>

    <style type="text/css">
        #table table {
            width: 100%;
            font-size: 14px;
            border: 1px solid #eee
        }

        #table {
            padding: 0 10px;
        }

        table thead th {
            background: #f5f5f5;
            padding: 10px;
            text-align: left;
        }

        table tbody td {
            padding: 10px;
            text-align: left;
            border-bottom: 1px solid #eee;
            border-right: 1px solid #eee;
        }

        table tbody td span {
            margin: 0 10px;
            cursor: pointer;
        }

        .delete {
            color: red;
        }

        .edit {
            color: #008cd5;
        }

        .add {
            border: 1px solid #eee;
            margin: 10px 0;
            padding: 15px;
        }

        input {
            border: 1px solid #ccc;
            padding: 5px;
            border-radius: 3px;
            margin-right: 15px;
        }

        button {
            background: #008cd5;
            border: 0;
            padding: 4px 15px;
            border-radius: 3px;
            color: #fff;
        }

        #mask {
            background: rgba(0, 0, 0, .5);
            width: 100%;
            height: 100%;
            position: fixed;
            z-index: 4;
            top: 0;
            left: 0;
        }

        .mask {
            width: 300px;
            height: 250px;
            background: rgba(255, 255, 255, 1);
            position: absolute;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            margin: auto;
            z-index: 47;
            border-radius: 5px;
        }

        .title {
            padding: 10px;
            border-bottom: 1px solid #eee;
        }

        .title span {
            float: right;
            cursor: pointer;
        }

        .content {
            padding: 10px;
        }

        .content input {
            width: 270px;
            margin-bottom: 15px;
        }
    </style>

</head>
<body>
<div id="table">
    <div class="add">
        <input type="text" v-model="addDetail.title" name="title" value="" placeholder="標題"/>
        <input type="text" v-model="addDetail.user" name="user" value="" placeholder="發布人"/>
        <input type="date" v-model="addDetail.dates" name="date" value="" placeholder="發布時間"/>
        <button @click="adddetail">新增</button>
    </div>
    <table cellpadding="0" cellspacing="0">
        <thead>
        <tr>
            <th>序號</th>
            <th>標題</th>
            <th>發布人</th>
            <th>發布時間</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="(item,index) in newsList">
            <td width="5%">{{index+1}}</td>
            <td>{{item.title}}</td>
            <td width="10%">{{item.user}}</td>
            <td width="15%">{{item.dates}}</td>
            <td width="10%"><span @click="deletelist(item.id,index)" class="delete">刪除</span><span class="edit" @click="edit(item)">編輯</span>
            </td>
        </tr>
        </tbody>
    </table>
    <div id="mask" v-if="editlist">
        <div class="mask">
            <div class="title">
                編輯
                <span @click="editlist=false">x</span>
            </div>
            <div class="content">
                <input type="text" v-model="editDetail.title" name="title" value="" placeholder="標題"/>
                <input type="text" v-model="editDetail.user" name="user" value="" placeholder="發布人"/>
                <input type="date" v-model="editDetail.dates" name="date" value="" placeholder="發布時間"/>
                <button @click="update">更新</button>
                <button @click="editlist=false">取消</button>
            </div>
        </div>
    </div>
</div>
<script>
    var app = new Vue({
        el: '#table',
        data: {
            addDetail: {},
            editlist: false,
            editDetail: {},
            newsList: [{title: 'linux系統運維', user: '林沖', dates: '2018-02-19', id: "1111111111"},
                {title: 'python全棧開發', user: '宋江', dates: '2018-02-29', id: "22222222222"},
                {title: '流暢的python', user: '黌攟', dates: '2018-05-09', id: "11111112222"},
                {title: 'google運維之道', user: '王力宏', dates: '2018-09-09', id: "3333333333"},
                {title: '有趣的django', user: '與小白', dates: '2018-02-09', id: "23322445"}],
            editid: ''
        },
        mounted() {

        },
        methods: {

            //新增
            adddetail() {
                //這里的思路應該是把this.addDetail傳給服務端,然后加載列表this.newsList
                //this.newsList.push(this.addDetail)
                this.newsList.push({
                    title: this.addDetail.title,
                    user: this.addDetail.user,
                    dates: this.addDetail.dates,
                })

                //axios.post('url',this.addDetail).then((res) =>{
                //若返回正確結果,清空新增輸入框的數據
                //this.addDetail.title = ""
                //this.addDetail.user = ""
                //this.addDetail.dates = ""
                //})

            },
            //刪除
            deletelist(id, i) {
                this.newsList.splice(i, 1);
                //這邊可以傳id給服務端進行刪除  ID = id
                //axios.get('url',{ID:id}).then((res) =>{
                //			加載列表
                //})
            },
            //編輯
            edit(item) {
                this.editDetail = {
                    title: item.title,
                    user: item.user,
                    dates: item.dates,
                    id: item.id
                };
                this.editlist = true;
                this.editid = item.id

            },
            //確認更新
            update() {
                //編輯的話,也是傳id去服務端
                //axios.get('url',{ID:id}).then((res) =>{
                //			加載列表
                //})
                let _this = this
                for (let i = 0; i < _this.newsList.length; i++) {
                    if (_this.newsList[i].id == this.editid) {
                        _this.newsList[i] = {
                            title: _this.editDetail.title,
                            user: _this.editDetail.user,
                            dates: _this.editDetail.dates,
                            id: this.editid
                        };
                        this.editlist = false
                    }
                }
            }
        }
    })
</script>
</body>
</html>

瀏覽網頁如下:

編輯效果

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM