蚂蚁多选index03009966

<template>
<div class="book">
  <div>
    <span>剩余总数值:{{keyong}},已用权限值:{{Remaining}}</span>
    <div v-for="(item,index) in dataList" :key="index">
      <span>{{item.title}}</span>
      <a-radio-group :options="item.data" v-model="item.selectValue" @change="onChange(item,index)"  :style="{display:'inline-block'}" />
    </div>
  </div>
</div>
</template>
<script>
export default {
  name: 'index',
  data () {
    return {
      total:20,
      keyong:0,
      dataList:[
        {
          title:'标题一',
          data:[
            { label: '授权', value: '0' },
            { label: '非授权', value: '1'},
          ],
          selectValue:'0',
          percentage: 0   //占用总数:0
        },
        {
          title:'标题二',
          data:[
            { label: '授权', value: '0' },
            { label: '非授权', value: '1'},
          ],
          selectValue:'1',
          percentage: 0.5
        },
        {
          title:'标题三',
          data:[
            { label: '授权', value: '0' },
            { label: '非授权', value: '1'},
          ],
          selectValue:'1',
          percentage: 0.5
        },
        {
          title:'标题四',
          data:[
            { label: '授权', value: '0' },
            { label: '非授权', value: '1'},
          ],
          selectValue:'0',
          percentage: 1
        }
      ],
    }
  },
  computed:{
    Remaining(){
      let zs = 0
      this.dataList.map(item => {
        zs = zs + item.percentage * item.selectValue
        console.log(zs)
      })
      this.keyong = this.total - Math.ceil(zs);
      return Math.ceil(zs)
    }
  },
  methods:{
    onChange(item,index) {
      console.log(item,index)
      this.dataList[index].selectValue = item.selectValue;
      console.log(this.dataList)
    },
  }
}
</script>

<style scoped>
/deep/ span{
  font-size: 16px!important;
}
</style>