上一篇博客分享了如何用动态路由传值,用实例谈谈this.
r
o
u
t
e
r
.
p
u
s
h
与
t
h
i
s
.
router.push 与 this.
router.push与this.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
.
router.push 与 this.
router.push与this.route.params
【Vue】vue-cli脚手架搭建项目静态资源图片渲染失败原因及解决方法
2.关于组件的显示效果,我所编写的是没有覆盖父组件(学生信息表组件)来显示的,大家也可根据着修改代码进行实现,可能显示的效果会更美观一些~
如果此篇博客能帮得到你,欢迎大家关注,点赞,评论,收藏,转发呀~
如有不足也请在评论区提出批评指正!多多指教!