vue + elementui 使用多选按钮实现单选功能 

 1 CommonRadio.vue
 2 
 3 <template>
 4     <div>
 5         <el-checkbox-group v-model="checkList" @change="handleChange">
 6             <el-checkbox :label="item[keyId]"  v-for="item in list" :key="item">{{item[label]}}</el-checkbox>
 7         </el-checkbox-group>
 8     </div>
 9 </template>
10 
11 <script>
12     export default {
13         props: {
14             value: [String, Array],
15             list: {
16                 type: Array,
17                 default () {
18                     return [];
19                 }
20             },
21             keyId: {
22                 type: String,
23                 default: 'value',
24             },
25             label: {
26                 type: String,
27                 default: 'label'
28             },
29         },
30         data() {
31             return {
32                 checkList: [],
33             }
34         },
35         watch: {
36             value: {
37                 immediate: true,
38                 handler(val) {
39                     this.checkList = [ val ];
40                 }
41             }
42         },
43 
44         methods: {
45             handleChange(arr) {
46                 this.checkList.length > 1 && this.checkList.shift();
47 
48                 this.$nextTick(() => {
49                     let val = this.checkList.length > 0 ? this.checkList[0] : '';
50                     this.$emit('change', val);
51                     this.$emit('input', val);
52                 })
53             }
54         },
55     }
56 </script>
57 
58 调用
59 
60 <div class="associated-list">
61                                 <template v-for="(item, index) in associatedList">
62                                     <el-form-item :label="item.name"  :key="item" v-if=" (maxSize !== null ? index < maxSize : true)">
63                                         <CommonRadio v-model="associated[`tags_${item.id}`]" :list="item.tags" :keyId="`id`" :label="`name`"></CommonRadio>
64                                     </el-form-item>
65                                 </template>
66 
67                                 <div class="get-more">
68                                     <el-button type="text" @click="showMore" v-if="maxSize !== null && associatedList.length > 3">更多行为标签&gt;&gt;</el-button>
69                                 </div>
70                             </div>

 

posted @ 2019-12-05 16:15  青草圆  阅读(3932)  评论(0)  编辑  收藏  举报