先附上一张demo的效果图
这里假设默认审批初始状态为通过,点击提交将审批结果传到后台
<template>
<div class="container">
<div class="approve_item" v-for="(item,index) in info" :key="index">
<div class="apply_info">
<p>申请时间:{{item.time}}</p>
<p>申请理由:{{item.reason}}</p>
<p>申请人:{{item.apply_name}}</p>
</div>
<el-radio-group v-model="radio[index]">
<el-radio :label="1">通过</el-radio>
<el-radio :label="2">拒绝</el-radio>
</el-radio-group>
</div>
<div class="btn_wrap">
<el-button type="primary" @click="submit">提交</el-button>
</div>
</div>
</template>
<script>
export default {
name: "test",
data() {
return {
radio: [], //审批结果列表
info:[
{
id:7,
time:'2021.1.6',
reason:'质量不好',
apply_name:'张三',
},
{
id:16,
time:'2021.1.8',
reason:'不想要了',
apply_name:'李四'
},
{
id:20,
time:'2021.2.17',
reason:'物流太慢',
apply_name:'王五'
},
]
};
},
methods: {
// 将结果提交后台
submit(){
this.info.map((item,index)=>{
item.is_pass = this.radio[index] == 1?true:false
})
}
},
mounted() {
this.info.map(()=>{
this.radio.push(1) //给一个初始状态1(通过)
})
},
};
</script>
<style lang='scss' scoped>
.container{
padding:20px 50px;
.approve_item{
height: 100px;
display: flex;
justify-content: space-between;
align-items: center;
border-bottom:1px solid #eee;
.apply_info{
font-size:16px;
color:#666;
p{
line-height: 1.5em;
}
}
}
.btn_wrap{
width:100%;
display: flex;
justify-content: flex-end;
margin-top:30px;
}
}
</style>