| @@ -1,51 +1,52 @@ | |||||||
| <template> | <template> | ||||||
|   <div> |   <div> | ||||||
|     <template v-for="(item, index) in options"> |     <template v-for="(item, index) in options"> | ||||||
|       <template v-if="values.includes(item.dictValue)"> |       <template v-if="values.includes(item.dictValue)"> | ||||||
|         <span |         <span | ||||||
|           v-if="item.listClass == 'default' || item.listClass == ''" |           v-if="item.listClass == 'default' || item.listClass == ''" | ||||||
|           :key="item.dictValue" |           :key="item.dictValue" | ||||||
|           :index="index" |           :index="index" | ||||||
|           :class="item.cssClass" |           :class="item.cssClass" | ||||||
|           >{{ item.dictLabel }}</span |           >{{ item.dictLabel }}</span | ||||||
|         > |         > | ||||||
|         <el-tag |         <el-tag | ||||||
|           v-else |           v-else | ||||||
|           :key="item.dictValue" |           :disable-transitions="true" | ||||||
|           :index="index" |           :key="item.dictValue" | ||||||
|           :type="item.listClass == 'primary' ? '' : item.listClass" |           :index="index" | ||||||
|           :class="item.cssClass" |           :type="item.listClass == 'primary' ? '' : item.listClass" | ||||||
|         > |           :class="item.cssClass" | ||||||
|           {{ item.dictLabel }} |         > | ||||||
|         </el-tag> |           {{ item.dictLabel }} | ||||||
|       </template> |         </el-tag> | ||||||
|     </template> |       </template> | ||||||
|   </div> |     </template> | ||||||
| </template> |   </div> | ||||||
|  | </template> | ||||||
| <script> |  | ||||||
| export default { | <script> | ||||||
|   name: "DictTag", | export default { | ||||||
|   props: { |   name: "DictTag", | ||||||
|     options: { |   props: { | ||||||
|       type: Array, |     options: { | ||||||
|       default: null, |       type: Array, | ||||||
|     }, |       default: null, | ||||||
|     value: [Number, String, Array], |     }, | ||||||
|   }, |     value: [Number, String, Array], | ||||||
|   computed: { |   }, | ||||||
|     values() { |   computed: { | ||||||
|       if (this.value !== null && typeof this.value !== 'undefined') { |     values() { | ||||||
|         return Array.isArray(this.value) ? this.value : [String(this.value)]; |       if (this.value !== null && typeof this.value !== 'undefined') { | ||||||
|       } else { |         return Array.isArray(this.value) ? this.value : [String(this.value)]; | ||||||
|         return []; |       } else { | ||||||
|       } |         return []; | ||||||
|     }, |       } | ||||||
|   }, |     }, | ||||||
| }; |   }, | ||||||
| </script> | }; | ||||||
| <style scoped> | </script> | ||||||
| .el-tag + .el-tag { | <style scoped> | ||||||
|   margin-left: 10px; | .el-tag + .el-tag { | ||||||
| } |   margin-left: 10px; | ||||||
| </style> | } | ||||||
|  | </style> | ||||||
|   | |||||||
		Reference in New Issue
	
	Block a user