渲染核心组件，代码如下

<template>
  <div>
    <table border="0" cellpadding="0" cellspacing="0" class="itemList">
      <template v-for="(itemCol, indexCol) in colList">
        <tr v-if="indexCol%2 === 0" :key="indexCol" class="itemCol">
          <slot v-if="indexCol<colList.length&&indexCol%2 === 0">
            <td class="itemName" width="20">
              {{ colList[indexCol].colText }}
            </td>
            <td class="itemvalue" :colspan="colList[indexCol].showItem.colspan" width="60">
              <template v-if="colList[indexCol].showItem && colList[indexCol].colValue.length>colList[indexCol].showItem.length">
                {{ colList[indexCol].colValue.substring(0, colList[indexCol].showItem.length) }}...
                <a @click="showValue(colList[indexCol])">更多</a>
              </template>
              <template v-else>
                {{ colList[indexCol].colValue }}
              </template>
            </td>
            <td v-if="indexCol<colList.length-1" width="20" :class="{brBottom:(colList.length%2==1)&&(indexCol===colList.length-3)}" class="itemName">
              {{ colList[indexCol+1].colText }}
            </td>
            <td v-if="indexCol<colList.length-1" width="60" :colspan="colList[indexCol+1].showItem.colspan" :class="{brBottom:(colList.length%2==1)&&(indexCol===colList.length-3)}" class="itemvalue brNone">
              <template v-if="colList[indexCol+1].showItem && colList[indexCol+1].colValue.length>colList[indexCol+1].showItem.length">
                {{ colList[indexCol+1].colValue.substring(0, colList[indexCol+1].showItem.length) }}...
                <a @click="showValue(colList[indexCol+1])">更多</a>
              </template>
              <template v-else>
                {{ colList[indexCol+1].colValue }}
              </template>
            </td>
          </slot>
        </tr>
      </template>
    </table>
    <tip-modal v-model="isTipShow" :params="params" width="600" />
  </div>
</template>

<script>
import TipModal from '@comp/widgets/TipModal'

export default {
  name: 'DataList',

  components: {
    TipModal
  },
  props: {
    detailData: {
      type: Object,
      default: () => {
        return {}
      }
    },
    showData: {
      type: Array,
      default: () => {
        return []
      }
    }
  },

  data () {
    return {
      isTipShow: false,
      params: {}
    }
  },

  computed: {
    isEven () {
      let l = Object.keys(this.detailData).length % 2
      if (l === 0 || this._isEmpty(this.detailData)) {
        return false
      } else {
        return true
      }
    },
    colList () {
      let itemList = []
      this._forEach(this.detailData, (value, name) => {
        itemList.push({
          colText: name,
          colValue: value,
          showItem: this.showData[itemList.length] || {}
        })
      })
      return itemList
    }
  },
  methods: {
    showValue (item) {
      this.params = {
        title: item.colText,
        oneBtn: true,
        content: `<div style="font-size:14px;padding:20px 35px; width:600px; height:400px;height:136px;overflow-y: auto; ">${item.colValue}</div>`
      }
      this.isTipShow = true
    }
  }
}
</script>

<style lang="scss" scoped>
.itemList {
  width: 100%;
  border-left: 1px solid #e6e6e6;
  border-bottom: 1px solid #e6e6e6;
  border-right: 1px solid #e6e6e6;
  table-layout:fixed;

  .brBottom {
    border-bottom: 1px solid #e6e6e6;
  }

  td {
    padding:6px 12px;
    font-size: 14px;
    border-top: 1px solid #e6e6e6;
    border-right: 1px solid #e6e6e6;

    &.itemName {
      color: #666666;
      background: #f9f9f9;
    }

    &.itemvalue {
      color: #292929;
      word-break:break-all;
      word-wrap:break;
    }

    .brNone {
      border-right-color: transparent;
    }
  }
}
</style>

 

效果

字段中文名称1	value1	字段中文名2	value2
字段中文名称3	value3	字段中文名4	value4
字段中文名称5	value5	字段中文名6	value6

 

---

核心参数

showData 格式定义

这是第一主要用来无限拓展 格式化数据的方式。  核心 必要 label （中文显示）和key(实际字段的值)   其他根据自己的需求随便拓展，

拓展：我的实际用户数据源来自于连个不同对象（prise和其他） 所以有type prie   还有更复杂的实现，此处不做展示

[{
  key: 'entName',
  label: '企业名称',
  type: 'prise'
}, {
  key: 'regCapAmt',
  label: '注册资本(万元)',
  type: 'prise',
  format: (value) => {
    if (value) {
      return (value - 0).toFixed(2)
    }
    return ''
  }
}, {
  key: 'userName',
  label: '法人代表'
}]

detailData  最终的转换时根据 show Data 来的，再核心 组件colList方法中showItem 对象 就是showData 中一个一个对象，和

detaiData 完全一一对应， 主要目的是为了实现，渲染时候部分字段格式化。 示例组件实现，length  的转换就是超过多长字段

点击更多现实全文；

 

 

总结实现
showData：这个参数核心价值，1.无限拓展，2. detailData 根据showData配置的规则转换数据（怎么转换实现看个人需求），

3. 根据配置规则承接  组件格式化渲染任务（无限可能自行拓展组件）

detailData核心 ：  为了统一数据源，为了和显示字段和showData 完全对应。（可以舍弃。本人实际应用）

组件核心： 主要是表格渲染核心循环 

简易版本  原理是一次循环两个任何渲染一次tr  两个td 样式实现边框封装。
<template>
  <div>
    <table border="0" cellpadding="0" cellspacing="0" class="itemList">
      <tr v-for="(itemCol, indexCol) in colList" :key="indexCol" class="itemCol">
        <template v-if="indexCol<colList.length&&indexCol%2 === 0">
          <td class="itemName">
            {{ colList[indexCol].colText }}
          </td>
          <td class="itemvalue">
            {{ colList[indexCol].colValue }}
          </td>
          <td v-if="indexCol<colList.length-1" :class="{brBottom:(colList.length%2==1)&&(indexCol===colList.length-3)}" class="itemName">
            {{ colList[indexCol+1].colText }}
          </td>
          <td v-if="indexCol<colList.length-1" :class="{brBottom:(colList.length%2==1)&&(indexCol===colList.length-3)}" class="itemvalue brNone">
            {{ colList[indexCol+1].colValue }}
          </td>
        </template>
      </tr>
    </table>
  </div>
</template>