網站首頁 編程語言 正文
Element-ui 中 Table 表格的設置表頭/去除下標線/設置行間距等屬性的使用及 slot-scope=“scope“ 的使用案例
作者：獅子座的男孩 更新時間： 2022-05-10 編程語言
Ⅰ、Element-ui 提供的Table組件與想要目標情況的對比：
1、Element-ui 提供Table組件情況：
其一、Element-ui 自提供的Table代碼情況為(示例的代碼)：
// Element-ui 自提供的代碼：
<template>
<el-table
:data="tableData"
style="width: 100%">
<el-table-column
prop="date"
label="日期"
width="180">
</el-table-column>
<el-table-column
prop="name"
label="姓名"
width="180">
</el-table-column>
<el-table-column
prop="address"
label="地址">
</el-table-column>
</el-table>
</template>
<script>
export default {
data() {
return {
tableData: [{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀區金沙江路 1518 弄'
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀區金沙江路 1517 弄'
}, {
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀區金沙江路 1519 弄'
}, {
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀區金沙江路 1516 弄'
}]
}
}
}
</script>
代碼地址：https://element.eleme.cn/#/zh-CN/component/table
其二、頁面的顯示情況為：
2、目標修改后的情況:
Ⅱ、實現 Table 表格達到目標效果變化的過程：
1、Table 表格設置表頭及去除下標線等屬性的修改：
其一、代碼：
<style lang="scss" scoped>
//設置表頭的背景色(可以設置和頁面背景色一致):
/deep/.el-table th {
background-color: #00083e;
}
//設置表每一行的背景色,字體顏色及字體粗細；
/deep/.el-table tr {
background-color: rgba(150, 157, 128, 0.9);
color: #fff;
font-weight: 500;
}
//去除表格每一行的下標線；
/deep/.el-table td {
border-bottom: none;
}
//去除表頭的下標線；
/deep/.el-table th.is-leaf {
border-bottom: none;
}
//去除表格的最下邊框線；
.el-table::before {
height: 0;
}
//設置表格的背景色問題(否則一般默認的背景色是白色)；
.el-table,
.el-table__expanded-cell {
background-color: #00083e;
}
</style>
其二、效果展示：
A、頁面表格展示為：
B、存在的問題：懸停背景為白色
2、Table 表格去除懸停背景色及設置行間距等屬性的修改：
其一、代碼：
<style lang="scss" scoped>
// 設置整個表格的內邊距問題:
.container-table {
padding: 0 30px 0 30px;
}
//設置表頭的背景色(可以設置和頁面背景色一致):
/deep/.el-table th {
background-color: #00083e;
}
//設置表每一行的背景色,字體顏色及字體粗細；
/deep/.el-table tr {
background-color: rgba(150, 157, 128, 0.9);
color: #fff;
font-weight: 500;
}
//去除表格每一行的下標線；
/deep/.el-table td {
border-bottom: none;
}
//去除表頭的下標線；
/deep/.el-table th.is-leaf {
border-bottom: none;
}
//去除表格的最下邊框線；
.el-table::before {
height: 0;
}
//設置表格的背景色問題(否則一般默認的背景色是白色)；
.el-table,
.el-table__expanded-cell {
background-color: #00083e;
}
//設置表格的行間距；
::v-deep .el-table__body {
-webkit-border-vertical-spacing: 13px;
}
//設置標題行(th)的字體屬性；
::v-deep .el-table th > .cell {
line-height: 11px;
font-size: 5px;
padding-left: 20px;
}
//設置 table 中的每個 cell 的屬性值；
::v-deep .el-table .cell {
padding-left: 20px;
line-height: 58px;
}
//設置 table 中的 th td 的 padding 值；
::v-deep .el-table td,
::v-deep .el-table th {
padding: 0;
}
//將表格的每一行懸停的背景色都設置為：transparent;
/deep/.el-table--enable-row-hover .el-table__body tr:hover > td {
background-color: transparent;
}
</style>
其二、效果展示：
A、頁面表格展示為：
B、解決：懸停背景問題(即：懸停背景色設置為 transparent )；
3、Table 表格使用 slot-scope=“scope“ 插入序號的修改：
其一、代碼：
<style lang="scss" scoped>
// 設置整個表格的內邊距問題:
.container-table {
padding: 0 30px 0 30px;
}
//設置表頭的背景色(可以設置和頁面背景色一致):
/deep/.el-table th {
background-color: #00083e;
}
//設置表每一行的背景色,字體顏色及字體粗細；
/deep/.el-table tr {
background-color: rgba(150, 157, 128, 0.9);
color: #fff;
font-weight: 500;
}
//去除表格每一行的下標線；
/deep/.el-table td {
border-bottom: none;
}
//去除表頭的下標線；
/deep/.el-table th.is-leaf {
border-bottom: none;
}
//去除表格的最下邊框線；
.el-table::before {
height: 0;
}
//設置表格的背景色問題(否則一般默認的背景色是白色)；
.el-table,
.el-table__expanded-cell {
background-color: #00083e;
}
//設置表格的行間距；
::v-deep .el-table__body {
-webkit-border-vertical-spacing: 13px;
}
//設置標題行(th)的字體屬性；
::v-deep .el-table th > .cell {
line-height: 11px;
font-size: 5px;
padding-left: 20px;
}
//設置 table 中的每個 cell 的屬性值；
::v-deep .el-table .cell {
padding-left: 20px;
line-height: 58px;
}
//設置 table 中的 th td 的 padding 值；
::v-deep .el-table td,
::v-deep .el-table th {
padding: 0;
}
//將表格的每一行懸停的背景色都設置為：transparent;
/deep/.el-table--enable-row-hover .el-table__body tr:hover > td {
background-color: transparent;
}
//設置插入 scope 的用于標記序號的圓；
.table-circle {
width: 30px;
height: 30px;
border-radius: 50%;
background-color: rgb(106, 248, 18);
margin: 6px 5px 0 0;
display: inline-block;
text-align: center;
line-height: 29px;
}
//設置插入 scope 的值考左對齊；
.table_right{
float: left;
}
//將插入 sope 的最后一個 icon 值設置為：不顯示；
.table_right:last-of-type {
/deep/.el-icon-right {
display: none;
}
}
// 設置 Element-ui 小圖標的屬性；
.el-icon-right{
width: 20px;
height: 20px;
padding: 0 5px 0 5px;
color: red;
}
</style>
其二、效果展示：
// 此時是將數據中的序號和 element-ui 的 icon 加上了；
Ⅲ、修改 Table 表格達到目標效果的展示：
1、整體的代碼(即：總的代碼)：
<template>
<div class="container">
<el-table
:data="tableData"
:height="tabHeight"
:width="tabWidth"
class="container-table"
style="width: 100%"
>
<el-table-column prop="date" label="日期" width="180"> </el-table-column>
<el-table-column prop="name" label="姓名" width="180"> </el-table-column>
<el-table-column prop="address" label="地址"> </el-table-column>
<el-table-column prop="process" label="">
<!-- 此時就是 slot-scope="scope" 的使用過程: -->
<template slot-scope="scope">
<div
class="table_right"
v-for="(iterm, indx) in scope.row.process"
:key="indx"
style="float: left; color: black"
>
<span class="table-circle">{{ iterm.order }}</span>
<!-- 此時引入的是：element-ui 中的 icon 值； -->
<span class="el-icon-right"></span>
</div>
</template>
</el-table-column>
</el-table>
</div>
</template>
<script>
export default {
data() {
return {
// tabHeight 與 tabWidth 是為了設置：表格的寬度與高度(即：在頁面中的展示位置);
tabHeight: window.innerHeight - 150,
tabWidth: window.innerWidth - 1000,
tableData: [
{
date: "2016-05-02",
name: "王小虎",
address: "上海市普陀區金沙江路 1518 弄",
process: [
{
order: "01",
},
{
order: "02",
},
{
order: "03",
},
{
order: "04",
},
{
order: "05",
},
],
},
{
date: "2016-05-04",
name: "王小虎",
address: "上海市普陀區金沙江路 1517 弄",
process: [
{
order: "01",
},
{
order: "02",
},
{
order: "03",
},
{
order: "04",
},
{
order: "05",
},
],
},
{
date: "2016-05-01",
name: "王小虎",
address: "上海市普陀區金沙江路 1519 弄",
process: [
{
order: "01",
},
{
order: "02",
},
{
order: "03",
},
{
order: "04",
},
{
order: "05",
},
],
},
{
date: "2016-05-03",
name: "王小虎",
address: "上海市普陀區金沙江路 1516 弄",
process: [
{
order: "01",
},
{
order: "02",
},
{
order: "03",
},
{
order: "04",
},
{
order: "05",
},
],
},
],
};
},
};
</script>
<style lang="scss" scoped>
// 設置整個表格的內邊距問題:
.container-table {
padding: 0 30px 0 30px;
}
//設置表頭的背景色(可以設置和頁面背景色一致):
/deep/.el-table th {
background-color: #00083e;
}
//設置表每一行的背景色,字體顏色及字體粗細；
/deep/.el-table tr {
background-color: rgba(150, 157, 128, 0.9);
color: #fff;
font-weight: 500;
}
//去除表格每一行的下標線；
/deep/.el-table td {
border-bottom: none;
}
//去除表頭的下標線；
/deep/.el-table th.is-leaf {
border-bottom: none;
}
//去除表格的最下邊框線；
.el-table::before {
height: 0;
}
//設置表格的背景色問題(否則一般默認的背景色是白色)；
.el-table,
.el-table__expanded-cell {
background-color: #00083e;
}
//設置表格的行間距；
::v-deep .el-table__body {
-webkit-border-vertical-spacing: 13px;
}
//設置標題行(th)的字體屬性；
::v-deep .el-table th > .cell {
line-height: 11px;
font-size: 5px;
padding-left: 20px;
}
//設置 table 中的每個 cell 的屬性值；
::v-deep .el-table .cell {
padding-left: 20px;
line-height: 58px;
}
//設置 table 中的 th td 的 padding 值；
::v-deep .el-table td,
::v-deep .el-table th {
padding: 0;
}
//將表格的每一行懸停的背景色都設置為：transparent;
/deep/.el-table--enable-row-hover .el-table__body tr:hover > td {
background-color: transparent;
}
//設置插入 scope 的用于標記序號的圓；
.table-circle {
width: 30px;
height: 30px;
border-radius: 50%;
background-color: rgb(106, 248, 18);
margin: 6px 5px 0 0;
display: inline-block;
text-align: center;
line-height: 29px;
}
//設置插入 scope 的值考左對齊；
.table_right{
float: left;
}
//將插入 sope 的最后一個 icon 值設置為：不顯示；
.table_right:last-of-type {
/deep/.el-icon-right {
display: none;
}
}
// 設置 Element-ui 小圖標的屬性；
.el-icon-right{
width: 20px;
height: 20px;
padding: 0 5px 0 5px;
color: red;
}
</style>
2、整體效果的展示：
Ⅳ、小結：
其一、哪里有不對或不合適的地方，還請大佬們多多指點和交流！
其二、有興趣的話，可以多多關注這個專欄(Vue(Vue2+Vue3)面試必備專欄)：https://blog.csdn.net/weixin_43405300/category_11525646.html?spm=1001.2014.3001.5482
原文鏈接：https://blog.csdn.net/weixin_43405300/article/details/124644864
相關推薦
- 2022-12-13 iOS底層實例解析Swift閉包及OC閉包_IOS
- 2022-01-29 win server 2008 web IIS部署asp.net程序后，CSS樣式錯亂不顯示問題
- 2022-07-02 C語言細致講解線程同步的集中方式_C 語言
- 2022-11-27 通過源碼分析Golang?cron的實現原理_Golang
- 2022-08-05 基于redis+lua進行限流
- 2022-09-03 C#設計模式之建造者模式_C#教程
- 2022-04-03 C++從匯編的視角審視對象的創建問題_C 語言
- 2022-12-22 C++?this原理與可變參數及友元函數友元類分步詳解用法_C 語言
- 最近更新
-
- window11 系統安裝 yarn
- 超詳細win安裝深度學習環境2025年最新版（
- Linux 中運行的top命令 怎么退出？
- MySQL 中decimal 的用法？ 存儲小
- get 、set 、toString 方法的使
- @Resource和 @Autowired注解
- Java基礎操作-- 運算符，流程控制 Flo
- 1. Int 和Integer 的區別，Jav
- spring @retryable不生效的一種
- Spring Security之認證信息的處理
- Spring Security之認證過濾器
- Spring Security概述快速入門
- Spring Security之配置體系
- 【SpringBoot】SpringCache
- Spring Security之基于方法配置權
- redisson分布式鎖中waittime的設
- maven:解決release錯誤：Artif
- restTemplate使用總結
- Spring Security之安全異常處理
- MybatisPlus優雅實現加密？
- Spring ioc容器與Bean的生命周期。
- 【探索SpringCloud】服務發現-Nac
- Spring Security之基于HttpR
- Redis 底層數據結構-簡單動態字符串（SD
- arthas操作spring被代理目標對象命令
- Spring中的單例模式應用詳解
- 聊聊消息隊列，發送消息的4種方式
- bootspring第三方資源配置管理
- GIT同步修改后的遠程分支
提供CDN加速