王小五_ 2022-08-18 14:21 采纳率: 51.6%
浏览 32
已结题

vue中使用table的相关问题

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

2条回答 默认 最新

  • 猿小白888 2022-08-18 16:00
    关注

    如有帮助，请采纳

    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>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论 编辑记录
查看更多回答(1条)

报告相同问题？

问题事件

  • 系统已结题 9月2日
  • 已采纳回答 8月25日
  • 修改了问题 8月18日
  • 修改了问题 8月18日
  • 展开全部

悬赏问题

  • ¥15 wegame打不开英雄联盟
  • ¥15 公司的电脑，win10系统自带远程协助，访问家里个人电脑，提示出现内部错误，各种常规的设置都已经尝试，感觉公司对此功能进行了限制（我们是集团公司）
  • ¥15 救！ENVI5.6深度学习初始化模型报错怎么办？
  • ¥30 eclipse开启服务后，网页无法打开
  • ¥30 雷达辐射源信号参考模型
  • ¥15 html+css+js如何实现这样子的效果？
  • ¥15 STM32单片机自主设计
  • ¥15 如何在node.js中或者java中给wav格式的音频编码成sil格式呢
  • ¥15 不小心不正规的开发公司导致不给我们y码，
  • ¥15 我的代码无法在vc++中运行呀，错误很多