前言
Vue结合ElementUI是一个流行的前端技术组合,用于快速开发和搭建桌面端的界面。以下是关于这个组合的详细介绍:
- 组件库:ElementUI是基于Vue 2.x版本开发的一套组件库。它为开发者提供了一系列的预制组件,如布局、导航、输入框、选择器等,这些组件均已预先设计好样式并封装了常用功能,使得开发者能够高效地构建出整洁且风格一致的用户界面。
- 技术栈:vue-element-admin是一个以Vue和ElementUI为核心的后台管理系统解决方案。它不仅包含了ElementUI提供的组件,还整合了诸如国际化(i18n)、动态路由、权限验证等高级功能,帮助开发者构建企业级的中后台产品原型。
- 安装与使用:要在Vue项目中使用ElementUI,首先需要通过npm或yarn将其安装到项目当中,然后在项目的main.js文件里引入ElementUI的样式和组件。完成这些步骤后,就可以在Vue组件中使用ElementUI提供的各类UI组件来构建页面了。
- 主题定制:ElementUI支持自定义主题,你可以通过在线主题生成器或者手动配置,来更改组件库的颜色、字体等样式,以满足项目的个性化需求。
- 版本更新:随着Vue框架的发展,ElementUI也在不断更新迭代。目前已经有了适配Vue 3.x版本的Element Plus,为使用最新版本Vue的开发者提供了更多的选项。
Vue与ElementUI的结合为开发者提供了一个高效且功能强大的开发方式,特别是对于需要快速搭建具有丰富交互和良好用户体验的Web应用程序来说,这一组合无疑是一个极佳的选择。
正文开始~
此博客通过投机取巧的方法,将table中本来只有一行的合计行,制作成(伪)多行合计行效果
之所以叫做(伪)多行合计行,是因为这个合计行实际上还是一行,只是通过样式改成了多行的模样~
参考博客:
elementUI官网样例:
将
show-summary
设置为true
就会在表格尾部展示合计行。默认情况下,对于合计行,第一列不进行数据求合操作,而是显示「合计」二字(可通过sum-text
配置),其余列会将本列所有数值进行求合操作,并显示出来。当然,你也可以定义自己的合计逻辑。使用summary-method
并传入一个方法,返回一个数组,这个数组中的各项就会显示在合计行的各列中
以上为基础的官网样例,基本上就是将合计行的第一格和后面的单元格分离开,单独返回,以实现合计行的制作
利用这个思路,可以在sums[0]中设置html内容,添加换行符号,实现多行效果,具体代码如下:
多行合并行文字列
columns.forEach((column, index) => {
if (index === 0) {
// sums[index] ===> 就是根据index==0 找到的第一列 的 最下方的合并行
sums[index] = <p class="count_row">合计<br /><br />已检查<br /><br />需检查<br /><br />检查率<br /><br />整改率</p>
return
}
......
})
通过返回一段html,同时里面还通过 <br/>换行符来将每段文字回车换行
效果图:
这样多行合计行的文字列的效果就完成了
多行合并行内容区域列
先展示整体的效果图:
代码样例:
/**
** 表格最下方的多个【伪合并行==》因为实际是一个大的合计行】 ,如总计、整改率、检查率 数据行的填充方法
* !通过在插入数组数据时,直接插入p标签和<br\>换行符,达到多个合计行的效果
*/
getSummaries (param) {
// console.log(param)
const { columns } = param
const sums = []
// console.log('columns====>', columns)
columns.forEach((column, index) => {
if (index === 0) {
// sums[index] ===> 就是根据index==0 找到的第一列 的 最下方的合并行
sums[index] = <p class="count_row">合计<br /><br />已检查<br /><br />需检查<br /><br />检查率<br /><br />整改率</p>
return
}
/**
1.通过判断当前循环到哪个表格 column.property==>[表头字段名称]了,然后往sums数组里面的对应位置插入数据
** 通过 <br /> 实现换行==》多个合计行
*! 在数组里插入html标签后,只要通过 {} 将数据处理包裹起来,就不会再被当成字符串了
*? case 'wcStructure': ===>一共有多少个表头,就有多少个case,用于根据表头,判断当前列,来生成这一列的最底部合并行的数据
*/
switch (column.property) {
// 第一列的合并行数据
// ! sums[index] ===> 就是根据column.property 找到的对应列 的 最下方的合并行
// ? {this.wcStructure.totalNumber} ===> 获取获取后端返回数据中,【wcStructure】对象的总计totalNumber
// ===> 注意,填充数据的顺序要跟名称行对应好
case 'wcStructure':
sums[index] = <p class="count_row">{this.wcStructure.totalNumber}<br /><br />
{this.wcStructure.checkedNumber}<br /><br />
{this.wcStructure.needToCheckNumber}<br /><br />
{this.toPercent(this.wcStructure.inspectionRate)}<br /><br />
{this.toPercent(this.wcStructure.correctionRate)}
</p>
break
// 第二列的合并行数据
case 'balconyStructure':
sums[index] = <p class="count_row">{this.balconyStructure.totalNumber}<br /><br />
{this.balconyStructure.checkedNumber}<br /><br />
{this.balconyStructure.needToCheckNumber}<br /><br />
{this.toPercent(this.balconyStructure.inspectionRate)}<br /><br />
{this.toPercent(this.balconyStructure.correctionRate)}
</p>
break
// 第三列的合并行数据
case 'bathroomWaterProof':
sums[index] = <p class="count_row">{this.bathroomWaterProof.totalNumber}<br /><br />
{this.bathroomWaterProof.checkedNumber}<br /><br />
{this.bathroomWaterProof.needToCheckNumber}<br /><br />
{this.toPercent(this.bathroomWaterProof.inspectionRate)}<br /><br />
{this.toPercent(this.bathroomWaterProof.correctionRate)}
</p>
break
........
........
default:
// sums[index] = '/'
sums[index] = <p>/</p>
break
}
})
return sums
},
// 浮点数与百分比转换
toPercent (point) {
// var str = Number(point * 100).toFixed(1) // .toFixed(1)==>保留小数点后1位,自动四舍五入==> 因为截取了小数位,所以能防止js的运算失真(0.5*100=50.00..1)
var str = parseInt(point * 100) // parseInt==>也能防止js的运算失真
str += '%'
return str
}
每个case就是一列,然后针对这一列,同理,将这一列的合并行弄成html,通过<br/>换行,实现多行的效果
博主 [DTcode7] 带您 溺亖在知识的海洋里,嘿嘿嘿.~
🐒 个人主页—— DTcode7 的博客🐒《微信小程序相关博客》
《Vue相关博客》
《前端开发习惯与小技巧相关博客》
《AIGC相关博客》《photoshop相关博客》
😚 吾辈才疏学浅,摹写之作,恐有瑕疵。望诸君海涵赐教。望轻喷,嘤嘤嘤 🙈
🕍 愿斯文对汝有所裨益,纵其简陋未及渊博,亦足以略尽绵薄之力。倘若尚存阙漏,敬请不吝斧正,俾便精进!