``` <template> <view class=""> <!-- 復選框 --> <u-cell-group> <u-cell-item title="多選" :arrow="false"> <u-checkbox-group @change="checkboxGroupChange"> <u-checkbox @change="checkboxChange" v-model="item.checked" v-for="(item, index) in list" :key="index" :name="item.id">{{item.name}}</u-checkbox> </u-checkbox-group> </u-cell-item> </u-cell-group> <!-- 單選框 --> <u-cell-group> <u-cell-item title="單選" :arrow="false"> <u-radio-group v-model="radioValue" @change="radioGroupChange"> <u-radio @change="radioChange" v-for="(item, index) in list" :disabled="item.disabled" :key="index" :name="item.id" >{{item.name}}</u-radio> </u-radio-group> </u-cell-item> </u-cell-group> <!-- 下拉 --> <u-cell-group> <u-cell-item title="發布類別" @click="changeGroup" :arrow="false"> <text slot="right-icon">{{list.length>0?list[okGroup].name:''}}</text> <u-picker v-model="show" mode="selector" :range="list" range-key="name" @confirm="confirm"></u-picker> </u-cell-item> </u-cell-group> </view> </template> <script> export default { data() { return { list: [{ id: 1, name: 'ap', checked: false, disabled: false }, { id: 2, name: 'ban', checked: false, disabled: false }, { id: 3, name: 'ora', checked: false, disabled: false }, { id: 4, name: 'ba4', checked: false, disabled: false }, { id: 5, name: 'or5', checked: false, disabled: false } ], show: false, okGroup:0, //下拉值 checkboxResult: [], checkboxValues: [1, 2], radioResult: '', radioValue: 1, }; }, onLoad() { var values = this.checkboxValues; for (var i = 0, lenI = values.length; i < lenI; ++i) { this.list[i].checked = true; } }, methods: { // 選中某個單選框時，由radio時觸發 radioChange(e) { //console.log(e); }, // 選中任一radio時，由radio-group觸發 radioGroupChange(e) { this.radioResult = e; console.log(e); }, // 選中某個復選框時，由checkbox時觸發 checkboxChange(e) { console.log(e); }, // 選中任一checkbox時，由checkbox-group觸發 checkboxGroupChange(e) { this.checkboxResult = e; console.log(e); }, confirm(e){ this.okGroup=e; }, changeGroup(){ this.show=!this.show; }, } }; </script> ```