Popover 弹出框
做项目的时候蒙版遮住了要看的内容z-index的问题需要设置 :modal-append-to-body=‘false’ 这个,一开始使用modal将蒙版关闭但是很丑,如下内容
<el-dialog :visible.sync="visible"
:title="rowContent.title"
:modal-append-to-body='false'
:close-on-click-modal="false"
:close-on-press-escape="false"
width="75%">
<div>我是弹出框内容</div>
</el-dialog>
表格
element ui抽屉的样式没出来
因为没加如下所示:
element ui表格最后一个单元格多出一条线
解决方法:
.el-table__fixed-right{
height: 100% !important;
}
表格行合并以及问题
行合并代码需要三步
- 将数据格式化,数据格式让后端将需要行合并的放到一起 如下图所示,
然后再将数据展开格式化 如下所示
this.dataList = res.data
this.dataList(item=>{// 循环格式化数据
if (item.content.length > 1) {
for (let i = 0; i < item.areas.length; i++) {
this.dataListTable.push({
account: item.account,
id: item.areas[i].id,
loginArea: item.areas[i].loginArea,
loginCount: item.areas[i].loginCount,
loginDate: item.areas[i].loginDate,
ipCountryCode: item.areas[i].ipCountryCode,
})
}
} else {
this.dataListTable.push({
account: item.account,
id: item.areas[0].id,
loginArea: item.areas[0].loginArea,
loginCount: item.areas[0].loginCount,
loginDate: item.areas[0].loginDate,
ipCountryCode: item.areas[0].ipCountryCode,
})
}
})
- 在el-table上添加span-method并定义mergeStratege方法
<el-table :data="dataListTable"
:header-cell-style="{background:'#FAFAFA',color:'#2C2C2C'}"
v-loading="dataListLoading"
border
:span-method="mergeStratege"
style="width: 100%">
mergeStratege({row, column, rowIndex, columnIndex}) {
console.log(row,columnIndex,'我调用了多行合并')
// 第一层判断控制从哪一列,或多少列合并,
if (columnIndex === 0) { // 此处表示第一列合并 columnIndex < 2 表示前两列合并
if (row.isStartMerge) {
return {
rowspan: row.rowspan,// 合并多少行,由数据处理函数处理得出
colspan: 1 // 可以控制合并多少列,可由数据处理函数处理
}
} else {
return {
rowspan: 0,
colspan: 0
}
}
}
},
- 监听数据变化
watch: {
dataListTable: {
// 数据处理函数,可以在此处设置从哪一行开始合并
// 此函数只处理了行合并情况,可根据需求自行设置列处理
handler(newData) {
if (newData.length) {
// 标记首行开始合并
let mergeStartRow = newData[0]
mergeStartRow.isStartMerge = true // 标记开始合并的行
mergeStartRow.rowspan = 1 // 标记需要合并行数
mergeStartRow.startIndex = 0 // 用于计算合并行数
// 需要计算最后一次的合并行数,故需要循环到length次
for (let i = 1; i <= newData.length; i++) {
// row中name字段不相等,则开启下一个合并处理;及最后一次合并
if ((newData[i] && mergeStartRow.loginAccount !== newData[i].loginAccount) || i === newData.length) {
mergeStartRow.endIndex = i // 用于计算合并行数
mergeStartRow.rowspan = mergeStartRow.endIndex - mergeStartRow.startIndex // 计算合并行数
mergeStartRow = newData[i] // 标记新的合并
if (mergeStartRow) {
mergeStartRow.isStartMerge = true
mergeStartRow.rowspan = 1
mergeStartRow.startIndex = i
}
}
}
}
},
immediate: true
}
}
问题:多行合并数据错列
这是由于我添加了根据时间排序 所有会导致数据乱掉 去掉就可以了