template中：
<template><view class=""><button class="tianjia" @click="tianjia">添加</button><view class="divOne" v-show="a"><text class="guanbi" @click="guanbi">X</text><view class="divTwo"><text>姓名：</text><input type="text" class="iptOne" v-model="xm"></view><view class="clear"></view><view class="divTwo"><text>年龄：</text><input type="number" class="iptOne" v-model="nl"></view><view class="clear"></view><view class="uni-form-item uni-column"><radio-group name="radio" @change="handleSexChange"><text class="text1">性别：</text><label><radio value="男" /><text>男</text></label><label class="labs"><radio value="女" /><text>女</text></label></radio-group></view><view class="uni-form-item uni-column"><radio-group name="radio" @change="handleNationChange"><text class="text1">民族：</text><label><radio value="汉" /><text>汉族</text></label><label class="labs"><radio value="满" /><text>满族</text></label></radio-group></view><view class="uni-form-item uni-column"><checkbox-group @change="handleHobbyChange"><text class="text1">爱好：</text><label><checkbox value="唱歌" /><text>唱歌</text></label><label class="labs"><checkbox value="跳舞" /><text>跳舞</text></label><label class="labs"><checkbox value="打篮球" /><text>打篮球</text></label></checkbox-group></view><button class="tijiao" @click="tujiao()">提交</button></view><table class="tab" border="1"><thead><tr><th>姓名</th><th>年龄</th><th>性别</th><th>民族</th><th>爱好</th><th>操作</th></tr></thead><tbody><tr v-for="(item,index) in arr" :key="index"><td>{{item.xm1}}</td><td>{{item.nl1}}</td><td>{{item.xb1}}</td><td>{{item.mz1}}</td><td>{{item.ah1}}</td><td><button class="shanchu" @click="shanchu(index)">删除</button></td></tr></tbody></table></view>
</template>script中：
<script>export default {data() {return {xm: '',nl: '',sex: '',nation: '',hobbies: [],a: false,arr: [{ xm1: '小红', nl1: '18', xb1: '男', mz1: '汉', ah1: '唱歌' },{ xm1: '小花', nl1: '18', xb1: '女', mz1: '满', ah1: '唱歌，跳舞' }]};},methods: {handleSexChange(e) {this.sex = e.detail.value;},handleNationChange(e) {this.nation = e.detail.value;},handleHobbyChange(e) {this.hobbies = e.detail.value;},shanchu(index) {if (confirm('确定要删除吗?')) {this.arr.splice(index, 1);}},tujiao() {const obj = {xm1: this.xm,nl1: this.nl,xb1: this.sex,mz1: this.nation,ah1: this.hobbies.join(', ')};this.arr.push(obj);},tianjia() {this.a = true;},guanbi() {this.a = false;}}}
</script>style中：
<style>.quxiao {width: 100px;float: left;margin-left: 20px;margin-top: 20px;}.queren {width: 100px;float: left;margin-left: 100px;margin-top: 20px;}.input1 {width: 300px;height: 30px;background: #fff;margin-top: 10px;margin-left: 20px;border-radius: 10px;}.box3 {width: 700rpx;height: 300px;background: rgba(0, 0, 0, 0.3);position: relative;top: -120px;margin: auto;border-radius: 10px;text-align: center;}.btn1 {width: 100px;clear: both;}.shanchu {width: 70px;height: 40px;background: indianred;color: #fff;margin: auto;}.tab {width: 750rpx;line-height: 30px;border-collapse: collapse;text-align: center;}.tijiao {width: 300px;margin: auto;margin-top: 20px;background: #e8909c;color: #fff;}.text1 {margin-top: 20px;}.labs {margin-left: 10px;}.uni-column {margin-left: 60px;margin-top: 10px;}.divOne {margin-top: 10px;}.iptOne {width: 300px;height: 50px;border: 1px solid #707070;border-radius: 10px;}.divTwo {margin-top: 10px;padding-left: 10px;}.divTwo text {float: left;line-height: 50px;}.divTwo input {float: left;}
.divTwo{margin-top: 10px;
}.clear {clear: both;}.guanbi {border: 1px solid #000000;padding: 2px 5px;border-radius: 10px;float: right;margin-right: 15px;margin-top: 10px;color: red;}.divOne {width: 750rpx;height: 340px;background: rgba(236, 236, 236, 0.5);border-radius: 10px;}* {margin: 0;padding: 0;}.tianjia {width: 100px;height: 50px;line-height: 50px;}
</style>
