Basic usage of el-table
<div class="user_skills">
<el-table class="tableIner" ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange">
<el-table-column v-for="(item,i) in workList" :label="item.name">
<template slot-scope="scope">{
{
scope.row[item.engName] }}</template>
</el-table-column>
<el-table-column label="操作" width="200">
<template slot-scope="scope">
<el-button type="text" size="small">编辑合同</el-button>
<el-button type="text" size="small">合同下载</el-button>
</template>
</el-table-column>
</el-table>
</div>
effect
desired effect
style modification
::v-deep .user_skills{
.el-table::before {
//去除底部白线
height: 0px;
}
.el-table {
background-color: transparent; //背景色设为透明
border-radius: 10px;//圆角边框
th.el-table__cell.is-leaf {
//设置表头底部边框为绿色
border-bottom: 1px solid Rgb(128,255,255,60%);
}
th {
//表头背景为蓝色渐变色，文字颜色为白色，不加粗
padding-top: 9px;//设置行高（通过padding控制）
padding-bottom:6px;
background: linear-gradient(180deg,rgba(1,84,120,1.00), #040b37 100%);
color: #ffffff;
font-weight: normal;
}
tr{
//每一行背景色设为透明
background-color: transparent;
&:hover {
//鼠标悬浮变色
td {
background-color:#1B4584 !important;
}
}
td {
//每一行的每一列文字为白色，底部边框为绿色，
padding-top: 6px;//设置行高（通过padding控制）
padding-bottom:6px;
color: #fff;
border-bottom: 1px solid Rgb(128,255,255,60%);
}
td:first-child{
//第一列的文字颜色为绿色
color: #80ffff;
}
}
th.el-table__cell:first-child.cell {
//第一个表头缩进30px
padding-left: 30px;
}
.el-table__cell:first-child .cell {
//第一列数据缩进30px
padding-left: 30px;
}
.el-button--text{
//按钮颜色为绿色
color:#80ffff;
}
}
}
Effect
