05-表單詳情使用el-descriptions利用map數據結構，使用el-tooltip注意事項

示例組件：

<template>
  <div class="detail_container">
    <div class="opt_box">
      <el-button size="small" type="primary" @click="addNodeFn">新增</el-button>
      <el-button size="small" @click="openImportRouter">批量導入</el-button>
    </div>

    <div v-if="treeData.length > 0" class="conent_box">
      <el-descriptions :title="detailData.title || ''">
        <el-descriptions-item v-for="[label, value] in infoMap" :key="value" :label="label">
         <el-tooltip :disabled="disabledFn(value)" :content="value" placement="top" effect="light"> <span>{{ getValue(value) }}</span> //這里記得一定要用標簽再包一層，否則點擊不起作用 </el-tooltip>
        </el-descriptions-item>
      </el-descriptions>
    </div>

    <div v-else>
      <el-empty :image-size="100"></el-empty>
    </div>
  </div>
</template>

<script> import { getStringLength } from '@/utils/getStringLength' import EventBus from '@/utils/EventBus' const mapKeys = ['分類編碼', '分類名稱', '上級編碼', '上級名稱', '備注'] const result = new Map() export default { components: {}, props: { detailData: { required: true, type: Object }, treeData: { required: true, type: Array } }, data() { return { info: {}, infoMap: {} } }, computed: {}, watch: { detailData: { deep: true, handler(newVal) { this.mapDataFn(newVal) } } }, created() { // 初始化
    this.mapDataFn({ obj: { classCode: '', className: '', uplevelClassCode: '', upLevelClassName: '', remark: '' } }) }, mounted() {}, methods: { disabledFn(attr) { if (!attr) return true
      if (getStringLength(attr) < 20) return true }, getValue(value) { return getStringLength(value) < 20 ? value : value.substr(0, 10) + '...' }, openImportRouter() { this.$router.push('/datamanage/materialImport') }, addNodeFn() { EventBus.$emit('addLevave1Node') }, // 映射數據的方法
 mapDataFn(newVal) { let i = 0
      for (const key in newVal.obj) { result.set(mapKeys[i], newVal.obj[key]) i++ } this.infoMap = result } } } </script>

<style scoped lang="scss"> .detail_container { .opt_box { padding: 10px 0 25px 0; text-align: right; } } </style>

統計輸入字符長度：

// 統計輸入字符長度
export const getStringLength = str => { let totalLength = 0 const list = str.split('') for (let i = 0; i < list.length; i++) { const s = list[i] if (s.match(/[\u0000-\u00ff]/g)) { // 半角
      totalLength += 1 } else if (s.match(/[\u4e00-\u9fa5]/g)) { // 中文
      totalLength += 2 } else if (s.match(/[\uff00-\uffff]/g)) { // 全角
      totalLength += 2 } } return totalLength }

 效果：

父組件分發數據，當前這個子組件負責組織數據后渲染。