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" :key :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">更多行为标签>></el-button>
69 </div>
70 </div>