vue中使用table的相关问题

data属性中新建一个员工对象，包含属性为姓名（张三），工号（003），年龄（25），用table遍历显示 ，标题行为 姓名，工号，年龄 。扩展为员工对象数组。增加李四记录，工号（004），年龄（26），用table遍历显示 四列，标题行为序号（1开始）， 姓名，工号，年龄 。table增加一列操作，每一行加入一个删除按钮，点击后可以删除当前记录 （增加王五、赵六记录）

如有帮助，请采纳

img

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css" rel="external nofollow" rel="external nofollow" >
    <title>员工增删改查</title>
    <style>
        #app{
            width:1024px;
            margin: 0 auto;
        }
        .body{
            margin-top:20px;
        }
    </style>
</head>
<body>
<div id="app">
    <h1>员工的增删改查</h1>
    <div class="head">
        <el-row :gutter="20">
            <el-col :span="6">
                <el-input v-model="user.username" placeholder="请输入姓名"></el-input>
            </el-col>
            <el-col :span="6">
                <el-input v-model="user.userId" placeholder="请输入工号"></el-input>
            </el-col>
            <el-col :span="6">
                <el-input v-model="user.age" placeholder="请输入年龄"></el-input>
            </el-col>
            <el-col :span="6">
                <el-button type="primary" @click="addUser" plain>添加信息</el-button>
            </el-col>
        </el-row>
    </div>
    <!-- 主体内容 -->
    <div class="body">
        <template>
            <el-table :data="records" style="width: 100%" width="600" stripe border>
                <el-table-column label="序号" width="100" align="center">
                    <template slot-scope="scope"> {{scope.$index + 1 }} </template>
                </el-table-column>
                <el-table-column prop="username" label="姓名" align="center"></el-table-column>
                <el-table-column prop="userId" label="年龄" align="center"></el-table-column>
                <el-table-column prop="age" label="工号" align="center"></el-table-column>
                <el-table-column prop="birthday" label="操作" align="center">
                    <template slot-scope="scope">
                        <el-button type="danger" @click="delUser(scope.$index)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </template>
    </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
    new Vue({
        el:'#app',
        data: function(){
            return{
                user:{
                    id:'',
                    username:'',
                    userId: '',
                    age: '',
                },
                records: [
                {
                    username: "张三",
                    userId: "003",
                    age: 25
                },{
                    username: "李四",
                    userId: "004",
                    age: 26
                },
                ],
            }
        },
        methods:{
            //添加
            addUser(){
                if(!this.user.username){
                    this.$message({
                        message: '请输入姓名！',
                        type: 'warning'
                    });
                    return;
                }
                if(!this.user.userId){
                    this.$message({
                        message: '请输入工号！',
                        type: 'warning'
                    });
                    return;
                }
                if (!this.user.age) {
                    this.$message({
                        message: '请输入年龄！',
                        type: 'warning'
                    });
                    return;
                }
                this.records.push(this.user);
                this.$message.success("员工"+user.username+"已添加");
                this.user = {
                    id:'',
                    username:'',
                    userId: '',
                    age: '',
                };
            },
            //删除
            delUser(idx){
                this.$confirm('确认删除此员工信息？')
                    .then(_ => {
                        this.records.splice(idx, 1);
                        this.$message.success("删除成功");
                    })
                    .catch(_ => {});
            },
        },
    })
</script>
</body>
</html>

就是一个表格 简单的增删 。 增加 就是 对 数据的 push 删除就是 filter之后再赋值