el-table表头上下显示内容

实现效果：

代码如下：

html 复制代码

 <el-table
        ref="refTable"
        :data="tableConfig.tableData"
        v-loading="tableConfig.loading"
        style="width: 100%; margin: 0 auto"
        height="100%"
        align="center"
        row-key="id"
        stripe
        size="medium"
        theme="lcs"
        border
      >
        <template v-for="(item, index) in tableConfig.viewColumns" :key="index">
          <el-table-column v-if="item.prop === 'designNoteContent'" :fixed="item.fixed" :prop="item.prop" :align="item.align" :min-width="item.width" :show-overflow-tooltip="true">
            <template #header>
              <div style="display: flex; flex-direction: column; align-items: center; line-height: 1.4">
                <span>{{ '设通号' }}</span>
                <span style="font-size: 12px; color: #606266; margin-top: 2px">DESIGN NOTE #</span>
              </div>
            </template>
            <template #default="scope">
              <a class="mc" titleContent="" @click="handleClickNoticeAppendix(scope.row)">
                {{ scope.row.designNoteContent }}
              </a>
            </template>
          </el-table-column>
          <el-table-column v-else :fixed="item.fixed" :prop="item.prop" :align="item.align" :min-width="item.width" :show-overflow-tooltip="true">
            <template #header>
              <div style="display: flex; flex-direction: column; align-items: center; line-height: 25px">
                <span>{{ getChineseLabel(item.label) }}</span>
                <span style="font-size: 12px; color: #606266; margin-top: 2px; line-height: 25px">
                  {{ getEnglishLabel(item.label) || '&nbsp;' }}
                </span>
              </div>
            </template>
          </el-table-column>
        </template>

        <el-table-column label="操作" align="center" fixed="right" min-width="180">
          <template #default="scope">
            <div class="lcs-table-button--group" style="justify-content: center">
              <div class="lcs-button-box">
                <div class="lcs-button">
                  <el-button class="elTbaleButton" link @click="handleClickInterface(scope.row)">{{ '接口' }}</el-button>
                  <el-button class="elTbaleButton" link @click="handleClickNoticeAppendix(scope.row)">{{ '详情' }}</el-button>
                  <el-button class="elTbaleButton" link style="color: #efaf41" @click="handleClickRowDel(scope.row)">{{ '移除' }}</el-button>
                </div>
              </div>
            </div>
          </template>
        </el-table-column>
      </el-table>

javascript 复制代码

//表格数据
const tableConfig = reactive({
  tableData: [],
  page: 1,
  pageSize: 10,
  total: 0,
  loading: false,
  viewColumns: [
    { prop: 'issue_reason', width: '220', align: 'center', label: '发行理由ISSUE REASON', fixed: false },
    { prop: 'destination', width: '150', align: 'center', label: '目的地DEST', fixed: false },
    { prop: 'requect_section', width: '150', align: 'center', label: '请求阶段REQUEST', fixed: false }
  ],
  showMore: false
})


// 提取标签中的中文部分
const getChineseLabel = (label) => {
  if (!label) return ''
  // 提取中文部分（包括中文符号）
  const chineseMatch = label.match(/^[\u4e00-\u9fa5]+/)
  return chineseMatch ? chineseMatch[0] : label
}

// 提取标签中的英文部分
const getEnglishLabel = (label) => {
  if (!label) return ''
  // 提取英文部分（包括#符号）
  const englishMatch = label.match(/[A-Z\s#]+$/)
  return englishMatch ? englishMatch[0] : ''
}

css 复制代码

<style lang="scss" scoped>
::v-deep .el-table th.el-table__cell > .cell {
  white-space: nowrap !important;
}
::v-deep .el-table--small .el-table__cell {
  padding: 0px;
}

::v-deep .el-table .el-table__cell {
  padding: 0px;
}

::v-deep .el-table__body .el-table__cell {
  padding: 2px 0px;
}

</style>