快捷導(dǎo)航

Vue ElementUI中el-table表格嵌套樣式問題小結(jié)

更新時(shí)間：2024年02月18日 11:13:05 作者：Lemon今天學(xué)習(xí)了嗎

這篇文章主要介紹了Vue ElementUI中el-table表格嵌套樣式問題小結(jié),兩個(gè)表格嵌套,當(dāng)父表格有children數(shù)組時(shí)子表格才展示,對(duì)Vue ElementUI中el-table表格嵌套樣式問題感興趣的朋友跟隨小編一起看看吧

一、表格嵌套要求：

兩個(gè)表格嵌套，當(dāng)父表格有children數(shù)組時(shí)子表格才展示；
子表格數(shù)據(jù)少于父表格展示字段，且對(duì)應(yīng)固定操作列不同；

二、嵌套問題：

當(dāng)使用el-table的type='expand'實(shí)現(xiàn)表格嵌套時(shí)，樣式出現(xiàn)以下問題：

展開圖標(biāo)每條數(shù)據(jù)都展示了，實(shí)際上接口數(shù)據(jù)并不是都有children數(shù)組；
在表格嵌套后，打開子表格，高亮顯示在經(jīng)過子表格后對(duì)應(yīng)不上；
父表格的操作列固定在右側(cè)影響了子表格的顯示；
滑動(dòng)到表格底部時(shí)，父子表格的固定列對(duì)不齊；

修改前效果如下：

修改后效果如下：

三、代碼實(shí)現(xiàn)：

1、表格定義唯一值row-key="indexId"和類名:row-class-name="getRowClass"

  <el-table
	:row-class-name="getRowClass"
	ref="table"
	v-loading="tableLoading"
	size="mini"
	height="100%"
	:data="tableData"
	row-key="indexId"
	tooltip-effect="dark"
	:header-cell-style="{
	  background: '#f5f7fa',
	  fontWeight: 'bold',
	  color: '#303133'
	}"
	@expand-change="expandChange"
	border
  >
	<el-table-column type="expand">
	  <template slot-scope="props">
		<!-- 表格嵌套第二層 -->
		<el-table
		  ref="sonTable"
		  :style="{
			height: `${(props.row.children.length + 1) * 36 + 1}px`,
			width: '100%'
		  }"
		  row-key="indexId"
		  :data="props.row.children"
		  tooltip-effect="dark"
		  :header-cell-style="{
			background: '#f5f7fa',
			fontWeight: 'bold',
			color: '#303133'
		  }"
		  border
		>    
            <!-- 子表格字段 -->
            <el-table-column> XXX </el-table-column>
        </el-table>
         <!-- 父表格字段 -->
         <el-table-column> XXX </el-table-column>
    </el-table>

2、類名判斷

    // 表格類名方法
    getRowClass({ row, rowIndex }) {
      // 把每一行的索引放進(jìn)row
      row.index = rowIndex
      // 判斷當(dāng)前行是否有子數(shù)據(jù)
      if (
        row.children === null ||
        row.children === undefined ||
        row.children.length === 0
      ) {
        return 'row-hidden-expand-icon'
      } else {
        return 'row-show-icon'
      }
    },

3、表格樣式

<style lang="scss" scoped>
// 子表格覆蓋右側(cè)fix
::v-deep .el-table__body-wrapper {
  .el-table__expanded-cell {
    z-index: 100;
  }
}
// 有子表格才顯示展開箭頭
:deep(.row-hidden-expand-icon) {
  td {
    &:first-child {
      .el-icon {
        visibility: hidden;
      }
    }
    .el-table__expand-icon {
      pointer-events: none;
    }
  }
}
// 去掉表格的第三、第四個(gè)單元格出現(xiàn)的展開圖標(biāo)
:deep(.el-table__row) {
  .el-table__cell {
    &:nth-child(3),
    &:nth-child(4) {
      .el-table__expand-icon {
        pointer-events: none;
        display: none;
      }
    }
  }
}
// 子表格樣式
:deep(.el-table__expanded-cell) {
  padding: 10px !important;
}
// 修復(fù)hover高亮不同步
::v-deep .el-table__body tr.hover-row > td.el-table__cell {
  background-color: transparent;
}
::v-deep .el-table .el-table__row:hover {
  background-color: #f5f7fa;
}
::v-deep .el-table__expanded-cell:hover {
  background-color: transparent;
}
// 修復(fù)滾到下面對(duì)不齊
::v-deep .el-table__fixed-body-wrapper .el-table__body {
  padding-bottom: 12px;
}
// 使得每一行都為36px高度
::v-deep .row-show-icon {
  td {
    &:first-child {
      .cell {
        height: 24px;
      }
    }
  }
}
:deep(.el-table .el-table__cell) {
  height: 36px !important;
}
</style>

到此這篇關(guān)于Vue ElementUI中el-table表格嵌套樣式問題的文章就介紹到這了,更多相關(guān)Vue ElementUI中el-table表格嵌套內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: