el-table展开行,展开一个表格

image.png

不叨叨,上码:

  <el-table
        ref="table"
        :data="tableData"
        :row-class-name="getRowClassName"
        :header-cell-style="{ background: '#f5f5f7' }"
      >
        <el-table-column type="expand">
          <template slot-scope="props">
            <el-table
              class="inline-table"
              :data="props.row.children"
              style="width: 100%; background: none"
            >
              <el-table-column width="100"></el-table-column>
              <el-table-column
                label="**名称"
                prop="mc"
                show-overflow-tooltip
              >
                <template slot-scope="{ row }">
                  <span style="color: #20a675" v-if="row.mc">{{
                    row.mc
                  }}</span>
                  <span v-else>-</span>
                </template>
              </el-table-column>
              <el-table-column
                label="**风险"
                prop="xkzfx"
                show-overflow-tooltip
              >
                <template slot-scope="{ row }">
                  <span>{{ row.xkzfx || '-' }}</span>
                </template>
              </el-table-column>
              <el-table-column
                label="扫描时间"
                prop="smsj"
                show-overflow-tooltip
              >
                <template slot-scope="{ row }">
                  <span>{{ row.smsj || '-' }}</span>
                </template>
              </el-table-column>
            </el-table>
          </template>
        </el-table-column>

        <el-table-column label="**名称" prop="mc" show-overflow-tooltip>
          <template slot-scope="{ row }">
            <span style="color: #20a675" v-if="row.mc">{{ row.mc }}</span>
            <span v-else>-</span>
          </template>
        </el-table-column>
        <el-table-column label="**说明" prop="sm" show-overflow-tooltip>
          <template slot-scope="{ row }">
            <span>{{ row.sm || '-' }}</span>
          </template></el-table-column
        >
        <el-table-column label="**语言" prop="yy" show-overflow-tooltip>
          <template slot-scope="{ row }">
            <span>{{ row.yy || '-' }}</span>
          </template>
        </el-table-column>
        <el-table-column label="**版本" prop="bb" show-overflow-tooltip>
          <template slot-scope="{ row }">
            <span>{{ row.bb || '-' }}</span>
          </template></el-table-column
        >
        <el-table-column label="安全风险" prop="aqfx" show-overflow-tooltip>
          <template slot-scope="{ row }">
            <span>-</span>
          </template></el-table-column
        >
        <el-table-column label="操作风险" prop="czfx" show-overflow-tooltip>
          <template slot-scope="{ row }">
            <span>{{ row.czfx || '-' }}</span>
          </template></el-table-column
        >
        <el-table-column label="***数" prop="ms" show-overflow-tooltip>
          <template slot-scope="{ row }">
            <span>{{ row.ms || '-' }}</span>
          </template></el-table-column
        >
        <el-table-column label="审批状态" prop="spzt" show-overflow-tooltip>
          <template slot-scope="{ row }">
            <span>{{ row.spzt || '-' }}</span>
          </template></el-table-column
        >
        <el-table-column label="提交活动" prop="tjhd" show-overflow-tooltip>
          <template slot-scope="{ row }">
            <span>{{ row.tjhd || '-' }}</span>
          </template></el-table-column
        >
        <el-table-column label="发布日期" prop="fbrq" show-overflow-tooltip>
          <template slot-scope="{ row }">
            <span>{{ row.fbrq || '-' }}</span>
          </template></el-table-column
        >
      </el-table>
    getRowClassName({ row, rowIndex }) {
      if (!row.children) {
        return 'row-expand-cover'
      } else if (!row.children.length) {
        return 'row-expand-cover'
      }
    },
/deep/ .row-expand-cover .el-table__expand-icon {
  visibility: hidden !important;
}
  .table {
    border-top: 1px solid #ebeef5;
    border-left: 1px solid #ebeef5;
    border-right: 1px solid #ebeef5;
    /deep/ .el-table__header tr,
    .el-table__header th {
      padding: 0;
      height: 44px;
    }
    /deep/ table .el-table__cell {
      padding: 6px 0;
    }

    .inline-table {
      /deep/ table td {
        border-bottom: none !important;
      }
    }

    .el-tag {
      color: #fff;
    }
  }
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容