【Vue实战】.vue格式单文件实现动态表格的增加、删除、查看详情等效果。（内附完整代码!!!）

最新推荐文章于 2022-12-08 14:13:35 发布

Danli.

最新推荐文章于 2022-12-08 14:13:35 发布

阅读量789

点赞数 2

分类专栏： Vue.js 文章标签： vue

本文链接：https://blog.csdn.net/weixin_45680114/article/details/109700157

版权

Vue.js 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

上一篇博客分享了如何用动态路由传值，用实例谈谈this. $r o u t e r . p u s h 与 t h i s .$ route.params
今天这篇博客主要想把在.vue格式单文件实现动态表格的增，删，查看等效果代码分享给大家~

目录结构：

在这里插入图片描述

一、动态表格的增加

在这里插入图片描述

代码示例：

//userManager.vue
<template>
  <div >
    <h1>用户管理</h1>
            <div id="showbox" v-if="showBox">
                <transition>
                <button class="small-button" type="button" @click="closeBox()">关闭</button>
                 </transition>
            <router-view/>
        </div>


    <div class="content1">学生信息表</div>
            <!--新增按钮-->
            <button v-on:click="addperson">新增</button>

            <!--表格-->
            <table rules="rows" frame="hsides" bordercolor="black" width="400px" class="content">
                <tr class="line">
                    <td>学号</td>
                    <td>姓名</td>
                    <td>性别</td>
                    <td></td>
                    <td></td>
                </tr>
                <tbody>
                <tr v-for="(person,index) in persons " :key="person.key" align="center" >
                    <td>{{person.num}}</td>
                    <td>{{person.name}}</td>
                    <td>{{person.sex}}</td>
                    <td><button @click="showdetail(index)">详情</button></td>
                    <td><button type="button" @click="deleteperson(index)">删除</button></td>
                </tr>
            </tbody>
            </table>
  </div>

  
</template>

<script>
// @ is an alias to /src
// import userMessage from '@/components/user/userMessage.vue'
// import userMessage2 from '@/components/user/userMessage2.vue'

export default {
  name: 'userManager',
  data(){
    return{
    //   add_show:"",
     showBox:false,
      persons:[
                {
                    num:1840624220,
                    name:'王阳',
                    sex:'男',
                    age:20,
                    hobby:'唱歌',
                    imgsrc:require('../assets/1.jpg'),
                    key:'1'
                },
                {
                    num:1840624250,
                    name:'苏慧敏',
                    sex:'女',
                    age:21,
                    hobby:'书法',
                    imgsrc:require('../assets/2.jpg'),
                    key:'2'
                },
                {
                    num:1840624257,
                    name:'陈俊铭',
                    sex:'男',
                    age:22,
                    hobby:'B-box',
                    imgsrc:require('../assets/3.jpg'),
                    key:'3'
                },
                ]
    }
  },
             methods: {

                addperson: function () {//点击新增按钮
                    this.$router.push({
                            name:'userMessage',
                            params:{
                                showBox:this.showBox
                            }
                        })
                        this.showBox = true;
                },

                showdetail:function(index){//点击查看详情按钮
                    this.$router.push({
                        name:'userMessage2',
                        params:{
                            num:this.persons.[index].num,
                            name:this.persons[index].name,
                            sex:this.persons[index].sex,
                            age:this.persons[index].age,
                            hobby:this.persons[index].hobby,
                            imgsrc:this.persons[index].imgsrc
                            }
                        })
                        this.showBox = true;
                    },
                    inputMessage:function(){
                        this.persons.push({
                            num:this.$route.params.num,
                            name:this.$route.params.name,
                            sex:this.$route.params.sex,
                            age:this.$route.params.age,
                            hobby:this.$route.params.hobby,
                            imgsrc:this.$route.params.imgsrc,
                        }),
                        this.showBox=false
                    },

                     closeBox:function(){
                        this.showBox = false;
                        this.$router.push({
                            name:'userManager',
                        })
                    },


                deleteperson:function(index){
                    this.persons.splice(index,1);
                    for(var i=0; i<this.persons.length; i++){
                        this.persons[i].id=i+1;
                        console.log(i);
                    };
                }
            }
}
</script>

//userMessage.vue
 <template id="mycomponent">
        <div class="mycomponent1">
                    <div class="container">
                        <div class="content">个人信息填写</div>
                        <div class="inputcontainer">
                            <div class="label-style">
                                <label for="">学号</label>
                                <input type="text" v-model="person.num" >
                            </div>
                            <div class="label-style">
                                <label for="">姓名</label>
                                <input type="text" v-model="person.name" >
                            </div>
                            <div class="label-style">
                                <label for="">性别</label>
                                <input type="text" v-model="person.sex"  >
                            </div>
                            <div class="label-style">
                                <label for="">年龄</label>
                                <input type="text" v-model="person.age" >
                            </div>
                            <div class="label-style">
                                <label for="">专长</label>
                                <textarea type="text" v-model="person.hobby" ></textarea>
                            </div>
                
                            <div class="label-style">
                                    <!--v-model双向绑定，确保下面的<img>图片显示和用户所选择select的是一致的-->
                                选择头像:<select v-model="person.imgsrc" >
                                    <option v-for="option in options" :key="option.key" :value="option.imgsrc">{{option.key}}</option>
                                    </select>
                                <br>
                                <span><img class="img-style"  v-bind:src="person.imgsrc"></span>
                            </div>
                            <br>
                                <button v-on:click="add()">提交</button>
                            </div>
                    </div>
                </div>
    </template>


<script>
export default {
  name:'userMessage',
  props:[],
  data(){
    return{
    person: {
              num:'',
              name: '',
              sex: '',
              age: '',
              hobby: ''
             },
    options:[
            {
              key:'1',
              imgsrc: require('../../assets/1.jpg')//require方法：webpack引用静态资源
            },
            {
              key:'2',
              imgsrc: require('../../assets/2.jpg')
            },
            {
              key:'3',
              imgsrc: require('../../assets/3.jpg')
            },
            {
              key:'4',
              imgsrc: require('../../assets/4.jpg')
            }
    ]
    }
  },
    methods: {
                  add: function () {
                    this.$router.push({
                        name:"userManager",
                        params:{
                            num:this.person.num,
                            name:this.person.name,
                            sex:this.person.sex,
                            age:this.person.age,
                            hobby:this.person.hobby,
                            imgsrc:this.person.imgsrc
                        }
                    }),
                    this.$parent.inputMessage()//子组件触发父组件执行inputMessage方法
                  }
            }
              }

</script>

二、动态表格的查看详情

在这里插入图片描述

代码示例：

userManager.vue文件代码上面已贴出来~

//userMessage2.vue
<template id="mycomponent2">
        <div>
                <!-- <div><button  type="button" v-on:click="guanbia()">X</button></div> -->
                <div>
                    <div>
                        <table class="secondcontainer">
                            <tr>
                                <td colspan="15">
                                    <div class="p-content">
                                        <p>学号：{{$route.params.num}}</p>
                                        <p>姓名：{{$route.params.name}}</p>
                                        <p>性别：{{$route.params.sex}}</p>
                                        <p>年龄：{{$route.params.age}}</p>
                                        <p>专长：{{$route.params.hobby}}</p>
                                    </div>
                                    <img v-bind:src="$route.params.imgsrc" class="myPersonImg" >
                                </td>
                            </tr>
                        </table>
                    </div>
                </div>
        </div>
    </template>


<script>
export default {
  name: 'userMessage2',
  data(){
    return{
        num:'',
        name:'',
        sex:'',
        age:'',
        hobby:'',
        imgsrc:''
    }},
}
</script>

总结：

1.关于.vue格式单文件实现动态表格的效果实现还涉及到一些零碎的知识点，如果大家有不懂的地方，也可以翻我之前写的博客，结合着理解哦（戳下面链接可查看）
【Vue实战】如何用动态路由传值，用实例谈谈this. $r o u t e r . p u s h 与 t h i s .$ route.params

【Vue】vue-cli脚手架搭建项目静态资源图片渲染失败原因及解决方法
2.关于组件的显示效果，我所编写的是没有覆盖父组件（学生信息表组件）来显示的，大家也可根据着修改代码进行实现，可能显示的效果会更美观一些~

如果此篇博客能帮得到你，欢迎大家关注，点赞，评论，收藏，转发呀~

如有不足也请在评论区提出批评指正！多多指教！

Danli.

关注

2
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
【Vue实战】.vue格式单文件实现动态表格的增加、删除、查看详情等效果。（内附完整代码!!!）

上一篇博客分享了如何用动态路由传值，用实例谈谈this.router.push与this.router.push 与 this.router.push与this.route.params今天这篇博客主要想把在.vue格式单文件实现动态表格的增，删，查看等效果代码分享给大家~目录结构：一、动态表格的增加代码示例：//userManager.vue<template> <div > <h1>用户管理</h1> &
复制链接

扫一扫

专栏目录