render 函数渲染表格的当前数据列使用
2024-10-09 22:01:37
render 函数渲染表格的当前数据列使用
实例1：
columns7: [
// 实例1：代码段
{
title: '编号',
align: 'center',
width: 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',
width: 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-width: 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',
width: 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-width: 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;
width: 100%;
line-height: 22px;
}
.pop-span1 {
width:120px;
display:inline-block;
}
.pop-span2{
width:200px;
display:inline-block;
}
.pop-span3{
width:80px;
display:inline-block;
text-align:center;
}
}
</style>
最后效果即如图：
鼠标移入小单元格时，动态请求浮窗内容
最新文章
- 2016/11/17 周四 <javascript的封装简单示例>
- LNK1123: 转换到 COFF 期间失败: 文件无效或损坏
- 有关segue的简介
- Hadoop笔记HDFS(1)
- ssis trainning
- js 如何生成唯一且不可预测的 ID
- nexus启动不了
- [LeetCode]Divide Two Integer
- Java [leetcode 16] 3Sum Closest
- select into from 和 insert into select 的用法
- for循环语句以及输出语句
- [Swift]LeetCode347. 前K个高频元素 | Top K Frequent Elements
- [c/c++] programming之路（31）、位运算（二）
- vue 使用vux封装的微信分享
- Ajax实例OR技术原理 转自 （http://blog.csdn.net/evankaka ）
- python标准库介绍——32 Queue 模块详解
- & 运算
- CF821E 【Okabe and El Psy Kongroo】
- 设计模式之第12章-享元模式(Java实现)
- Java for LeetCode 137 Single Number II