bab-icon/resources/js/components/UiRadioTime.vue

<template>
    <el-row class="form-group">
        <el-col :span="3" style="min-height:50px;padding-top:5px;"></el-col>
        <el-col :span="18">
            <div>
                <el-radio border>第一个自然周</el-radio>&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;
                <el-radio border>第二个自然周</el-radio>&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;
                <el-radio border>第三个自然周</el-radio>
            </div>
            <div v-if="lists.other.start">
                <el-radio
                        v-model="defaultValue"
                        :name="lists.name"
                        :label="lists.other.start"
                        border>{{lists.other.start}} 至 {{lists.other.end}}</el-radio>
            </div>
            <div v-for="lts in lists.list">
                <el-col :span="18">
                    <el-radio
                            v-for="it in lts"
                            :name="lists.name"
                            v-model="defaultValue"
                            :label="it.start"
                            border>{{it.start}} 至 {{it.end}}</el-radio>
                </el-col>
            </div>
        </el-col>
        <el-col :span="3"></el-col>
    </el-row>
</template>

<script>
    export default {
        props: ['lists'],
        data() {
            return {
                defaultValue: this.lists.default
            }
        },
        mounted() {},
        methods: {}
    }
</script>

<style scoped>
    .el-radio-button__orig-radio {
        display: none;
    }
    .classJs {
        margin-left: 10px;
        vertical-align: middle;
        height:42px;
        line-height:42px;
    }
    .red{
        color: red;
    }
</style>