| ¶Ô±ÈÐÂÎļþ | 
|  |  |  | 
|---|
|  |  |  | <template> | 
|---|
|  |  |  | <div class="value"> | 
|---|
|  |  |  | <i class="el-icon-loading" v-if="data == null"></i> | 
|---|
|  |  |  | <slot v-else>{{getValue()}}{{suffix}}</slot> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | </template> | 
|---|
|  |  |  |  | 
|---|
|  |  |  | <script> | 
|---|
|  |  |  | export default { | 
|---|
|  |  |  | name: 'Value', | 
|---|
|  |  |  | props: { | 
|---|
|  |  |  | data: { | 
|---|
|  |  |  | type: Object | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | prop: { | 
|---|
|  |  |  | type: String | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | suffix: { | 
|---|
|  |  |  | type: String | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | handler: { | 
|---|
|  |  |  | type: Function | 
|---|
|  |  |  | } | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | methods: { | 
|---|
|  |  |  | /** | 
|---|
|  |  |  | * è·åå¼ | 
|---|
|  |  |  | * | 
|---|
|  |  |  | * @returns {string} | 
|---|
|  |  |  | */ | 
|---|
|  |  |  | getValue () { | 
|---|
|  |  |  | if (this.data == null) { | 
|---|
|  |  |  | return '' | 
|---|
|  |  |  | } | 
|---|
|  |  |  | if (this.prop == null) { | 
|---|
|  |  |  | return this.data | 
|---|
|  |  |  | } | 
|---|
|  |  |  | const props = this.prop.split('.') | 
|---|
|  |  |  | let i = 0 | 
|---|
|  |  |  | let value = this.data | 
|---|
|  |  |  | while (i < props.length) { | 
|---|
|  |  |  | value = value[props[i]] | 
|---|
|  |  |  | i++ | 
|---|
|  |  |  | } | 
|---|
|  |  |  | if (this.handler == null) { | 
|---|
|  |  |  | return value | 
|---|
|  |  |  | } | 
|---|
|  |  |  | return this.handler(value) | 
|---|
|  |  |  | } | 
|---|
|  |  |  | } | 
|---|
|  |  |  | } | 
|---|
|  |  |  | </script> | 
|---|
|  |  |  |  | 
|---|
|  |  |  | <style scoped lang="scss"> | 
|---|
|  |  |  | .value { | 
|---|
|  |  |  | word-break: break-all; | 
|---|
|  |  |  | .el-icon-loading { | 
|---|
|  |  |  | font-size: 16px; | 
|---|
|  |  |  | color: #999; | 
|---|
|  |  |  | position: relative; | 
|---|
|  |  |  | top: 1px; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | } | 
|---|
|  |  |  | </style> | 
|---|