render 函数渲染表格的当前数据列使用
实例1：
columns7: [
// 实例1：代码段 { title: '编号', align: 'center', 90, key: 'No', render: (h, params) => { return h('p', { style: 'color:#2D8CF0;font-size:14px;cursor: pointer;', on: { 'click': () => { this.GotoPage(params.row) } } }, params.row.No) } },
// 实例2代码段： 未写成组件前 { title: '个数', align: 'center', 100, key: 'popupArr', render: (h, params) => { let arrData = params.row.SumArr let rowData = [] // 弹窗内容处理 let popupCon = [] if (params.row.popupArr.length){ popupCon = [ h('p', {}, `个数: ${params.row.popupArr.length}`), h('p', {}, [ h('span', {class: 'pop-span1'}, '金额'), h('span', {class: 'pop-span3'}, '号码') ]) ] params.row.popupArr.map(items => { let money = null money = h('p', {}, [ h('span', {class: 'pop-span1'}, `￥${this.numberComma(Number(items.Amount).toFixed(2))}`), h('span', {class: 'pop-span2'}, `${items.Number}`) ]) popupCon.push(money) }) } // 外层内容 arrData.map((item, index) => { // 单元格行的内容 // on-popper-show 为监听事件，鼠标移上去请求接口拿数据展示在浮窗中 let rowsC = null let tooltip = [] // Tooltip tooltip[0] = h('Tooltip', { props: {placement: 'left', 'delay': 700, 'max-width': '600'}, on: { 'on-popper-show': () => { this.PopperShow(h, params) } } }, [ h('p', {style: 'min- 70px;'}, item.Count), h('div', {slot: 'content'}, popupCon) ]) // 小单元格外层框 if (index + 1 === arrData.length) { rowsC = h('p', { style: 'padding:0 0 0 0;height:40px;line-height:40px;' }, tooltip) } else { rowsC = h('p', { style: 'padding:0 0 0 0;height:40px;line-height:40px;border-bottom: 1px solid #E8EAEC;' }, tooltip) } rowData.push(rowsC) }) return h('div', {class: 'countCol'}, rowData) } }, ] // 方法 methods: { PopperShow (h, params) { // 请求接口已封装 this.$store.dispatch('GetInvoicedInfo', params.row.Id).then((res) => { if (res.Result) { this.$nextTick(() => { params.row.popupArr = res.Data this.$forceUpdate() }) } }) } }
实例2：
render： Tooltip 动态获取浮窗数据的实例
以上代码我们可以优化下，将浮窗Tooltip写成公共组件的方式，在render中引入该模板组件：
columns7: [ { title: '个数', align: 'center', 100, key: 'popupArr', render: (h, params) => { let arrData = params.row.SumArr let rowData = []// 外层内容 arrData.map((item, index) => { // 单元格行的内容 // on-popper-show 为监听事件，鼠标移上去请求接口拿数据展示在浮窗中 let rowsC = null let tooltip = [] // Tooltip
tooltip[0] = h(vInfoTooltip, {
props: {
placement: 'left',
rowId: params.row.Id,
dataNo: item.No
},
slot: 'content'
}, [
h('p', {
style: 'min- 70px;',
slot: 'infoTooltip'
}, [
h('span', {
style: 'color: rgb(45, 140, 240);cursor: pointer;font-size:14px;',
slot: 'content'
}, item.Count)
])
])
// 小单元格外层框 if (index + 1 === arrData.length) { rowsC = h('p', { style: 'padding:0 0 0 0;height:40px;line-height:40px;' }, tooltip) } else { rowsC = h('p', { style: 'padding:0 0 0 0;height:40px;line-height:40px;border-bottom: 1px solid #E8EAEC;' }, tooltip) } rowData.push(rowsC) }) return h('div', {class: 'countCol'}, rowData) } },
]
InfoTooltip.vue
<template>
<div class="InfoTooltip">
<Tooltip :placement="placement" :delay="700" @on-popper-show="PopperShow" @on-popper-hide="PopperHide" max-width="600">
<slot name="infoTooltip"></slot> <!-- 该内容即 鼠标移上去的内容 -->
<div class="demo-InfoList" slot="content"> <!-- 该div内的内容即为 浮窗的内容 -->
<p>个数： {{InfoList.length}}</p>
<p>
<span class="pop-span1">金额</span>
<span class="pop-span2">号码</span>
<span class="pop-span3">状态</span>
</p>
<p v-for="(items, index) in InfoList" :key="index">
<span class="pop-span1">￥{{numberComma(Number(items.Amount).toFixed(2))}}</span>
<span class="pop-span2">{{items.Number}}</span>
<span class="pop-span3">{{items.Status}}</span>
</p>
</div>
</Tooltip>
</div>
</template>
<script>
export default {
name: 'InfoTooltip',
components: {
},
data () {
return {
InfoList: []
}
},
props: {
rowId: String,
dataNo: String,
placement: {
type: String,
default: 'right-start'
}
},
created () {
},
computed: {
},
methods: {
GetPopupArrFn (arrData, dataNo) {
let obj = {}
arrData.map(function (item) {
let timeKey = item.InvoDate.split(' ')[0]
if (!obj[timeKey]) {
obj[timeKey] = []
}
obj[timeKey].push(item)
})
return obj[dataNo]
},
PopperHide () {
},
PopperShow () {
this.$store.dispatch('GetInvoicedInfo', this.rowId).then((res) => {
if (res.Result) {
this.$nextTick(() => {
this.InfoList = this.GetPopupArrFn(res.Data, this.dataNo)
})
}
})
}
}
}
</script>
<style scoped lang="less">
.demo-InfoList {
display: inline-table;
p {
float: left;
100%;
line-height: 22px;
}
.pop-span1 {
120px;
display:inline-block;
}
.pop-span2{
200px;
display:inline-block;
}
.pop-span3{
80px;
display:inline-block;
text-align:center;
}
}
</style>
最后效果即如图：
鼠标移入小单元格时，动态请求浮窗内容
