| 提交 | 用户 | 时间 | ||
| fd2207 | 1 | <template> |
| 懒 | 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 == '') && (item.raw.cssClass == '' || item.raw.cssClass == null)" | |
| 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 | separator: { | |
| 45 | type: String, | |
| 46 | default: "," | |
| 47 | } | |
| 48 | }, | |
| 49 | data() { | |
| 50 | return { | |
| 51 | unmatchArray: [], // 记录未匹配的项 | |
| 52 | } | |
| 53 | }, | |
| 54 | computed: { | |
| 55 | values() { | |
| 56 | if (this.value === null || typeof this.value === 'undefined' || this.value === '') return [] | |
| 57 | return Array.isArray(this.value) ? this.value.map(item => '' + item) : String(this.value).split(this.separator) | |
| 58 | }, | |
| 59 | unmatch() { | |
| 60 | this.unmatchArray = [] | |
| 61 | // 没有value不显示 | |
| 62 | if (this.value === null || typeof this.value === 'undefined' || this.value === '' || this.options.length === 0) return false | |
| 63 | // 传入值为数组 | |
| 64 | let unmatch = false // 添加一个标志来判断是否有未匹配项 | |
| 65 | this.values.forEach(item => { | |
| 66 | if (!this.options.some(v => v.value === item)) { | |
| 67 | this.unmatchArray.push(item) | |
| 68 | unmatch = true // 如果有未匹配项，将标志设置为true | |
| 69 | } | |
| 70 | }) | |
| 71 | return unmatch // 返回标志的值 | |
| 72 | }, | |
| 73 | ||
| 74 | }, | |
| 75 | filters: { | |
| 76 | handleArray(array) { | |
| 77 | if (array.length === 0) return ''; | |
| 78 | return array.reduce((pre, cur) => { | |
| 79 | return pre + ' ' + cur; | |
| 80 | }) | |
| 81 | }, | |
| 82 | } | |
| 83 | }; | |
| 84 | </script> | |
| 85 | <style scoped> | |
| 86 | .el-tag + .el-tag { | |
| 87 | margin-left: 10px; | |
| 88 | } | |
| 89 | </style> | |
