Vue 表格 增删改查 纯前端

 功能不完整，大体测试好用。

<template>
    <table>
        <thead>
            <tr>
                <td>username</td>
                <td>age</td>
                <td>sex</td>
                <td>professional</td>
                <td>hobby</td>
                <td>operation</td>
            </tr>
        </thead>
        <tbody>
            <tr v-for="(d,id)  in datas" :key="id">
                <td>{{ d.username }}</td>
                <td>{{ d.age }}</td>
                <td>{{ d.sex }}</td>
                <td>{{ d.professional }}</td>
                <td>{{ d.hobby }}</td>
                <td>
                    <button @click="editor(d)">编辑</button>
                    <button @click="deleted(d.id)">删除</button>
                    <button @click="select(d)">查看</button>
                </td>
            </tr>
            <tr>
                <td>
                    <input type="text" placeholder="username" v-model="piece.username">
                </td>
                <td>
                    <input type="text" placeholder="age" v-model="piece.age">
                </td>
                <td>
                    <input type="text" placeholder="sex" v-model="piece.sex">
                </td>
                <td>
                    <input type="text" placeholder="professional" v-model="piece.professional">
                </td>
                <td>
                    <input type="text" placeholder="hobby" v-model="piece.hobby">
                </td>
                <td>
                    <button @click="save()">保存</button>
                </td>
            </tr>
        </tbody>
    </table>
</template>

<script>
export default {
    data () {
        return {
            datas: [
                {id: 1, username: '张三', age: 20, sex: '男', professional: '计算机', hobby: '打篮球'},
                {id: 2, username: '李四', age: 21, sex: '男', professional: 'web', hobby: '羽毛球'},
                {id: 3, username: '王五', age: 23, sex: '男', professional: 'python', hobby: '乒乓球'},
                {id: 4, username: '如花', age: 19, sex: '女', professional: 'java', hobby: '学习'},
                {id: 5, username: '似玉', age: 22, sex: '女', professional: '软件', hobby: '看书'}
            ],
            piece: {
                id: 0, username: '', age: '', sex: '', professional: '', hobby: ''
            }
        }
    },
    methods: {
        editor (d) {
            this.piece = d;
        },
        deleted (id) {
            for(var i =0;i<this.datas.length;i++){
                if(this.datas[i].id == id){
                    this.datas.splice(i,1);
                    break;
                }
            }
        },
        select (d) {
            this.$Modal.info({
                title: '用户信息',
                content: `username: ${d.username}<br>age: ${d.age}<br>sex: ${d.sex}<br>professional: ${d.professional}<br>hobby: ${d.hobby}`
            })
        },
        save () {
            if(this.piece.id == 0){
                this.piece.id = this.datas.length + 1;
                this.datas.push(this.piece);
            }
            this.piece = {id: 0, username: '', age: '', sex: '', professional: '', hobby: ''};
        }
    }
}
</script>

<style>
    table tr td{
        border: 2px solid black;
        padding: 5px;
        font-size: 15px;
    }
    table{
        border-collapse: collapse;
        margin: 0 auto;
    }
    thead tr td{
        font-weight: bold;
        font-size: 18px;
    }
    button{
        font-size: 15px;
        padding: 5px;
        font-weight: 100;
    }
</style>