element-ui table头部标题列栏合并

举例

<el-table v-if="selectedLi==1" :data="workLoadList" :span-method="cellSpanMethod" border key="consulting" style="width: 100%; margin-top: 20px" size="mini" :height='tableHeight' class="workLoad-body-table"v-loading="loading"><el-table-column prop="abbreviationName" label="各地市" width="180" align="center" /><el-table-column prop="amount3" label="引导式法律咨询" align="center"><el-table-column prop="guidanceTotal" label="咨询量" align="center"><template slot="header"><el-tooltip class="item" effect="light" placement="top"v-on="tootipTemplateToMode('引导-咨询量')"><div slot="content" v-html="doTemplateToMode.guidanceTotal"></div><span>咨询量</span></el-tooltip></template></el-table-column><el-table-column prop="guidanceReceiveTotal" label="接待量" align="center"><template slot="header"><el-tooltip class="item" effect="light" placement="top"v-on="tootipTemplateToMode('引导-接待量')"><div slot="content" v-html="doTemplateToMode.guidanceReceiveTotal"></div><span>接待量</span></el-tooltip></template></el-table-column><el-table-column prop="guidanceReceiveTotalRate" label="接待率" align="center"><template slot="header"><el-tooltip class="item" effect="light" placement="top"v-on="tootipTemplateToMode('引导-接待率')"><div slot="content" v-html="doTemplateToMode.guidanceReceiveTotalRate"></div><span>接待率</span></el-tooltip></template></el-table-column><el-table-column prop="guidanceTotalPercentage" label="占比" align="center"><template slot="header"><el-tooltip class="item" effect="light" placement="top"v-on="tootipTemplateToMode('引导-占比')"><div slot="content" v-html="doTemplateToMode.guidanceTotalPercentage"></div><span>占比</span></el-tooltip></template></el-table-column></el-table-column></el-table>

methods: {cellSpanMethod({ row, column, rowIndex, columnIndex }) {var that = this;if (columnIndex == 0) {for (let item in that.mapNameList) {if (row.abbreviationName == item) {if (rowIndex == that.mapNameIndexList[item]) {return {rowspan: that.mapNameList[item],colspan: 1,};} else if (rowIndex != that.mapNameIndexList[item]) {return {rowspan: 0,colspan: 0,};} else {return {rowspan: 1,colspan: 1,};}}}} else if (columnIndex == 1) {for (let item in that.mapNameList) {if (row.abbreviationName == item) {if (rowIndex == that.mapNameIndexList[item]) {return {rowspan: that.mapNameList[item],colspan: 1,};} else if (rowIndex != that.mapNameIndexList[item]) {return {rowspan: 0,colspan: 0,};} else {return {rowspan: 1,colspan: 1,};}}}} else if (columnIndex == 2) {for (let item in that.mapNameList) {if (row.abbreviationName == item) {if (rowIndex == that.mapNameIndexList[item]) {return {rowspan: that.mapNameList[item],colspan: 1,};} else if (rowIndex != that.mapNameIndexList[item]) {return {rowspan: 0,colspan: 0,};} else {return {rowspan: 1,colspan: 1,};}}}}},}

效果

element-ui table头部标题列栏合并相关推荐

Element UI Table组件固定列底部有一条白线的解决方案
bug:在某一次项目中使用暗色系的固定列时发现有一条白线无法消除(之前项目都是亮色系所以没发现问题) 通过排查发现这条白线能够随着el-table__fixed-right元素移动但是却没有任何子元素 ...
解决element UI table 表格固定列单元格错位
最近在使用表格组件的固定列后,才发现表格有样式bug,在使用点击事件切换表格尺寸大小时,会发现固定列样式没有对齐,在切换页面之后,就会出现列错误的现象,如下: 解决方法: 1.给表格添加ref < ...
记录：element UI table 表格固定列单元格上下错位
一.表格添加ref <el-table ref="table"></el-table> 二.页面切换或数据更新时调用 this.$nextTick(() = ...
element ui table封装组件，render 函数动态事件设置
接着上一篇讲的,封装element ui table, 支持自定义列的展示和按照指定顺序展示自定义列需要在引用页面重新写一下,这样就可以定义化了,多数用于一些转换,或者操作列场景下,自行考虑即可,我 ...
Element UI table组件源码分析
本文章从如下图所示的最基本的table入手,分析table组件源代码.本人已经对table组件原来的源码进行削减,源码点击这里下载.本文只对重要的代码片段进行讲解,推荐下载代码把项目运行起来,跟着文章 ...
Element UI Table表格样式调整
调整Element UI Table表格的样式最终效果: 单元格合并,样式调整模拟后端返回数据 {teamName: '小组一',outsourceFlag: '是',adminName: '张三 ...
element ui Table表格数据筛选功能实现
先来看看实现效果 element ui Table表格数据筛选功能实现查看Element官网关于筛选的实例. 在列中设置filters filter-method属性即可开启该列的筛选,filte ...
element ui table组件筛选数据
需求:element ui table组件筛选全部数据 element ui 文档注意: 1. @filter-change 要写在table根元素,也就是<el-table @filter- ...
如何设置element ui table的show-overflow-tooltip属性以及宽度
如何设置element ui table的show-overflow-tooltip属性以及宽度

element-ui table头部标题列栏合并

举例

效果

element-ui table头部标题列栏合并相关推荐

最新文章

热门文章