element-ui 表格和折叠面板样式如何调整分行展示？

Z时代
2024-02-08
分类：IT

问题描述

element-ui 表格和折叠面板样式如何调整分行展示？

问题出现的环境背景及自己尝试过哪些方法

问题出现的环境背景

表格里面嵌套了一个折叠面板，想修改折叠面板的 title 的样式，如下图：

element-ui 表格和折叠面板样式如何调整分行展示？

我的尝试

现在是分了三行，但是第二行和第三行有时候没有数据
使用 v-if 判断以后就出现了下面的效果，第二行的数据在小屏幕场景，数据太长时显示不全，展开折叠面板以后就出现了第二个图片的情况

element-ui 表格和折叠面板样式如何调整分行展示？

相关代码

这个是我写的 html 代码

<el-collapse v-if="row.app_type === 'tls'">
  <el-collapse-item name="1">
    <template slot="title">
      <template>
        <div style="display:flex !important;flex-direction:column !important;align-items: normal;">
          <span style="height: 20px !important;width:100% !important;line-hight:13px !important;font-size:8px !important;">
            <span>SNI: {{ row.app.tls.sni }}</span>
            <el-divider direction="vertical" />
            <span>version: {{ row.app.tls.version }}</span>
          </span>
          <span v-if="row.app.tls.subject" style="font-size:8px !important;height: 20px !important;width:100% !important;">Subject: {{ row.app.tls.subject }} </span>
          <span v-if="row.app.tls.fingerprint" style="font-size:8px !important;">Fingerprint: {{ row.app.tls.fingerprint }} </span>
        </div>
      </template>
    </template>
    <div>JA3: {{ row.app.tls.ja3.string }}</div>
    <div>JA3 Hash: {{ row.app.tls.ja3.hash }}</div>
    <div>JA3S: {{ row.app.tls.ja3s.string }}</div>
    <div>JA3S Hash: {{ row.app.tls.ja3s.hash }}</div>
  </el-collapse-item></el-collapse>

这个是表格高度的代码

::v-deep .el-collapse-item__header{
  background-color: rgba(255, 255, 255, 0);
  height: 60px;
  line-height: 60px;
  font-size: 8px !important;
  font-weight:0;}