element-ui中radio组件在循环中的使用

最新推荐文章于 2025-06-16 10:40:51 发布

原创最新推荐文章于 2025-06-16 10:40:51 发布 · 1.8k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #html #es6

博客围绕审批结果提交功能展开，假设默认审批初始状态为通过，点击提交可将审批结果传到后台，还附上了demo效果图。涉及Vue.js、JavaScript、HTML、ES6等技术。

先附上一张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>