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>
效果
希望达到的效果
样式修改
::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;
}
}
}
效果