| 提交 | 用户 | 时间 | ||
| a57dc2 | 1 | <template> |
| W | 2 | <div> |
| 3 | <template v-for="(item, index) in options"> | |
| 4 | <template v-if="values.includes(item.value)"> | |
| 5 | <span | |
| 6 | v-if="item.raw.listClass == 'default' || item.raw.listClass == ''" | |
| 7 | :key="item.value" | |
| 8 | :index="index" | |
| 9 | :class="item.raw.cssClass" | |
| 10 | >{{ item.label + ' ' }}</span | |
| 11 | > | |
| 12 | <el-tag | |
| 13 | v-else | |
| 14 | :disable-transitions="true" | |
| 15 | :key="item.value" | |
| 16 | :index="index" | |
| 17 | :type="item.raw.listClass == 'primary' ? '' : item.raw.listClass" | |
| 18 | :class="item.raw.cssClass" | |
| 19 | > | |
| 20 | {{ item.label + ' ' }} | |
| 21 | </el-tag> | |
| 22 | </template> | |
| 23 | </template> | |
| 24 | <template v-if="unmatch && showValue"> | |
| 25 | {{ unmatchArray | handleArray }} | |
| 26 | </template> | |
| 27 | </div> | |
| 28 | </template> | |
| 29 | ||
| 30 | <script> | |
| 31 | export default { | |
| 32 | name: "DictTag", | |
| 33 | props: { | |
| 34 | options: { | |
| 35 | type: Array, | |
| 36 | default: null, | |
| 37 | }, | |
| 38 | value: [Number, String, Array], | |
| 39 | // 当未找到匹配的数据时，显示value | |
| 40 | showValue: { | |
| 41 | type: Boolean, | |
| 42 | default: true, | |
| 43 | } | |
| 44 | }, | |
| 45 | data() { | |
| 46 | return { | |
| 47 | unmatchArray: [], // 记录未匹配的项 | |
| 48 | } | |
| 49 | }, | |
| 50 | computed: { | |
| 51 | values() { | |
| 52 | if (this.value !== null && typeof this.value !== 'undefined') { | |
| 53 | return Array.isArray(this.value) ? this.value : [String(this.value)]; | |
| 54 | } else { | |
| 55 | return []; | |
| 56 | } | |
| 57 | }, | |
| 58 | unmatch(){ | |
| 59 | this.unmatchArray = []; | |
| 60 | if (this.value !== null && typeof this.value !== 'undefined') { | |
| 61 | // 传入值为非数组 | |
| 62 | if(!Array.isArray(this.value)){ | |
| 63 | if(this.options.some(v=> v.value == this.value )) return false; | |
| 64 | this.unmatchArray.push(this.value); | |
| 65 | return true; | |
| 66 | } | |
| 67 | // 传入值为Array | |
| 68 | this.value.forEach(item => { | |
| 69 | if (!this.options.some(v=> v.value == item )) this.unmatchArray.push(item) | |
| 70 | }); | |
| 71 | return true; | |
| 72 | } | |
| 73 | // 没有value不显示 | |
| 74 | return false; | |
| 75 | }, | |
| 76 | ||
| 77 | }, | |
| 78 | filters: { | |
| 79 | handleArray(array) { | |
| 80 | if(array.length===0) return ''; | |
| 81 | return array.reduce((pre, cur) => { | |
| 82 | return pre + ' ' + cur; | |
| 83 | }) | |
| 84 | }, | |
| 85 | } | |
| 86 | }; | |
| 87 | </script> | |
| 88 | <style scoped> | |
| 89 | .el-tag + .el-tag { | |
| 90 | margin-left: 10px; | |
| 91 | } | |
| 92 | </style> | |
