快捷導(dǎo)航

如何去掉el-table中自帶的邊框線

更新時(shí)間：2025年01月06日 10:40:06 作者：邊洛洛

文章介紹了如何去掉Element UI中el-table組件自帶的邊框線,通常情況下,el-table沒有添加border屬性,但仍然會(huì)出現(xiàn)邊框線,可能的原因包括ElementUI的默認(rèn)樣式或表格的某些內(nèi)置樣式,感興趣的朋友跟隨小編一起看看吧

1.問題:el-table中自帶的邊框線

2.解決后的效果:

3.分析:明明在el-table中沒有添加border,但是會(huì)出現(xiàn)邊框線.
可能的原因: 由 Element UI 的默認(rèn)樣式或者表格的某些內(nèi)置樣式引起的。比如,<el-table> 會(huì)通過 border-collapse 或 border-spacing 等屬性影響邊框的顯示。

4.具體代碼

樣式修改

/* 去掉表格整體左邊和上邊的線 */
.el-table--group, .el-table--border {
  border: none
}
 /* 去掉表格整體最下面的邊框 */
.el-table::before {
  width: 0;
  height: 0;
}
/* 去掉表格整體最右邊的邊框 */
.el-table--group::after, .el-table--border::after {
  width: 0;
  height: 0;
}
/* 去掉表格橫向的邊框線 */
::v-deep .el-table th.el-table__cell.is-leaf, 
::v-deep .el-table td.el-table__cell {
    border: none;
}
/* 去掉表頭上的邊框線 */
::v-deep .el-table--border th.el-table__cell {
    border: none;
} 
/* 去掉表格縱向的邊框線 */
.el-table--border .el-table__cell {
    border-right: none;
} 
/* 表頭高度 */
::v-deep(.el-table th.el-table__cell) {
  min-height: 0 !important; 
  padding: 0 !important;
  height: 23px !important;
  line-height: 23px;
}

渲染模板

<el-table :data="tempData" :header-cell-style="{background: '#fff'}" :header-row-style="{height: '23px'}">
          <el-table-column label="排名" prop="rank" align="center" width="50"/>
          <el-table-column label="注冊(cè)號(hào)" prop="num" align="center" width="70"/>
          <el-table-column label="姓名" prop="name">
            <template slot-scope="scope">
              <el-input v-if="isEditing" v-model="scope.row.name" @input="updateData(scope.row)"/>
              <span v-else>{{ scope.row.name }}</span>
            </template>
          </el-table-column>
          <el-table-column label="代表隊(duì)" prop="team" align="center" width="140"></el-table-column>
          <el-table-column label="組" prop="series" align="center">
            <el-table-column v-for="(item, index) in 6" :key="index" :label="`${index + 1}`" align="center" width="70">
              <template slot-scope="scope">
                <!-- 判斷是否編輯狀態(tài) -->
                <el-input
                  v-if="isEditing"
                  v-model="scope.row.series[index]"
                  @input="updateData(scope.row)"             
                />
                <span v-else>{{ scope.row.series[index] }}</span>
              </template>
            </el-table-column>
          </el-table-column>          
          <el-table-column label="總計(jì)" prop="total" align="center" width="80">
            <template slot-scope="scope">
              <el-input v-if="isEditing" v-model="scope.row.total" @input="updateData(scope.row)"/>
              <span v-else>{{ scope.row.total }}</span>
            </template>
          </el-table-column>
          <el-table-column label="備注" prop="remarks" align="center" width="130"></el-table-column>  
      </el-table>

到此這篇關(guān)于如何去掉el-table中自帶的邊框線的文章就介紹到這了,更多相關(guān)去掉el-table邊框線內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: