企业官网建设流程全解析

需求：在合计行中自定义展示内容和交互功能；

效果如下

el-table提供了 summary-method 使用该函数只能进行 算数 和 简单的cell内容自定义;在该函数中制作数据

methods: { getSummary({ columns, data }) { return columns.map((col, colIndex) => { if (colIndex === 0) return '合计' if (col.property === 'price') { this.price = data.reduce((acc, cur) => acc + Number(cur.pPrice), 0) return '¥ ' + this.price } return '' }) }, }

使用dom操作获取所需cell的html元素，在元素上进行操作；搭配ElTooltip实现效果

watch: { contractList() { const table = document.querySelector('.el-table__footer-wrapper>table') this.$nextTick(() => { // 总金额 const cell = table.rows[0].cells[4] cell.onmouseenter = () => { this.$refs.ElTooltipRef.referenceElm = cell this.$refs.ElTooltipRef.$refs.popper && (this.$refs.ElTooltipRef.$refs.popper.style.display = 'none') this.$refs.ElTooltipRef.doDestroy() this.$refs.ElTooltipRef.setExpectedState(true) this.$refs.ElTooltipRef.handleShowPopper() } cell.onmouseleave = () => { this.$refs.ElTooltipRef.setExpectedState(false) this.$refs.ElTooltipRef.handleClosePopper() } }) } },

<!-- 合计的el-tooltip --> <el-tooltip ref="ElTooltipRef" placement="top" effect="dark"> <template #content> 本页: ¥ {{ pageContractPrice }} <br/> <div style="padding-top: 5px">全部: ¥ {{ total }}</div> </template> </el-tooltip>

在watch中使用到ElTooltip的属性和函数均在el-tooltip源码中有体现