渲染核心组件,代码如下
<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>