修改DictTag组件,当value没有匹配的值时,展示value
| | |
| | | :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() { |
| | |
| | | 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> |