elementUI的笔记

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;
}

表格行合并以及问题

行合并代码需要三步

1. 将数据格式化，数据格式让后端将需要行合并的放到一起 如下图所示，
   
   然后再将数据展开格式化 如下所示
   

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,
              })
            }
})

2. 在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
          }
        }
      }
    },

3. 监听数据变化

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
    }
}

问题：多行合并数据错列

这是由于我添加了根据时间排序 所有会导致数据乱掉 去掉就可以了