element UI 布局中两个table,只覆盖其中一个table

220 阅读1分钟

在Element UI中,如果你想为一个表格(Table)禁用表格线,而另一个表格保持显示表格线,你可以通过自定义CSS样式来实现这一点,而无需使用!important!important通常用于覆盖其他样式表中的规则,但在这种情况下,我们可以通过更具体的选择器来避免使用它。

Element UI的表格组件允许你通过class-name属性为表格添加自定义的CSS类名。你可以利用这个属性为不需要显示表格线的表格添加一个特定的类名,然后为这个类名编写CSS规则来隐藏表格线。

<template>
      <el-popover
          v-model="showModal"
          class="el-popover"
          trigger="click"
          visible-arrow="false"
          @show="afterEnter"
          @hide="afterLeave"
          v-show="showModal"
    >
    <div ref="projectButton" class="pop-div">
      <div class="zone_table">
      <el-table :data="zone1Data" style="height:100%" class="no-border-table">
        <el-table-column
          v-for="column in zone1columns"
          :key="column.prop"
          :prop="column.prop"
          :label="column.label"
          :width="column.width">
        </el-table-column>
      </el-table>
      </div>
    </div>
  </el-popover>
  <div class="info_all">
      <el-table
            :data="filteredData"
            style="width: 90%;"
            height="180px"
      >
      <el-table-column
        label="Device ID"
        width="180"
      >
        <template slot-scope="scope">
          <el-tag
            size="medium"
            color="#131c0c"
            @click="openModalAndFetchData(scope.row.id)"
            style="border: none !important;"
          >
            {{ scope.row.clientId }}
          </el-tag>
        </template>
      </el-table-column>
      </el-table>
    </div>
</template>
<style>
/* 覆盖Element UI的默认表格线样式,并设置行高 */
.no-border-table .el-table__body-wrapper tbody tr {
  height: 37px; /* 设置行高 */
  line-height: 37px; /* 可选:设置行内文字垂直居中,如果行高和字体大小匹配则不需要 */
}

/* 还需要处理表格头和表格体的边框样式(如果不显示表格线的话) */
.no-border-table .el-table__header-wrapper th,
.no-border-table .el-table__body-wrapper td {
  border-right: none;
  border-bottom: none;
  text-align: left;
}

/* 处理第一列的左边框(如果需要的话) */
.no-border-table .el-table__header-wrapper th:first-child,
.no-border-table .el-table__body-wrapper td:first-child {
  border-left: none;
}
</style>