| | |
| | | <template v-for="(item, index) in options"> |
| | | <template v-if="values.includes(item.value)"> |
| | | <span |
| | | v-if="item.raw.listClass == 'default' || item.raw.listClass == ''" |
| | | v-if="(item.raw.listClass == 'default' || item.raw.listClass == '') && (item.raw.cssClass == '' || item.raw.cssClass == null)" |
| | | :key="item.value" |
| | | :index="index" |
| | | :class="item.raw.cssClass" |
| | | >{{ item.label }}</span |
| | | >{{ item.label + " " }}</span |
| | | > |
| | | <el-tag |
| | | v-else |
| | |
| | | :type="item.raw.listClass == 'primary' ? '' : item.raw.listClass" |
| | | :class="item.raw.cssClass" |
| | | > |
| | | {{ item.label }} |
| | | {{ item.label + " " }} |
| | | </el-tag> |
| | | </template> |
| | | </template> |
| | | <template v-if="unmatch && showValue"> |
| | | {{ unmatchArray | handleArray }} |
| | | </template> |
| | | </div> |
| | | </template> |
| | |
| | | default: null, |
| | | }, |
| | | value: [Number, String, Array], |
| | | // 当未找到匹配的数据时,显示value |
| | | showValue: { |
| | | type: Boolean, |
| | | default: true, |
| | | } |
| | | }, |
| | | data() { |
| | | return { |
| | | unmatchArray: [], // 记录未匹配的项 |
| | | } |
| | | }, |
| | | computed: { |
| | | values() { |
| | | if (this.value !== null && typeof this.value !== 'undefined') { |
| | | if (this.value !== null && typeof this.value !== "undefined") { |
| | | return Array.isArray(this.value) ? this.value : [String(this.value)]; |
| | | } else { |
| | | return []; |
| | | } |
| | | }, |
| | | unmatch() { |
| | | this.unmatchArray = []; |
| | | if (this.value !== null && typeof this.value !== "undefined") { |
| | | // 传入值为非数组 |
| | | if (!Array.isArray(this.value)) { |
| | | if (this.options.some((v) => v.value == this.value)) return false; |
| | | this.unmatchArray.push(this.value); |
| | | return true; |
| | | } |
| | | // 传入值为Array |
| | | this.value.forEach((item) => { |
| | | if (!this.options.some((v) => v.value == item)) |
| | | this.unmatchArray.push(item); |
| | | }); |
| | | return true; |
| | | } |
| | | // 没有value不显示 |
| | | return false; |
| | | }, |
| | | }, |
| | | filters: { |
| | | handleArray(array) { |
| | | if (array.length === 0) return ""; |
| | | return array.reduce((pre, cur) => { |
| | | return pre + " " + cur; |
| | | }) |
| | | } |
| | | } |
| | | }; |
| | | </script> |
| | | <style scoped> |
| | | .el-tag + .el-tag { |
| | | margin-left: 10px; |
| | | } |
| | | </style> |
| | | </style> |