1.修改el-table中tr在hover时的样式
.el-table--enable-row-hover .el-table__body tr:hover > td {
background: #157283;
color: #fff;
}
2.el-table列表点击进行跳转
@row-click="goDetail"
<el-table :data="dataList.slice(0, 10)" class="bidTable" slot="empty"
:default-sort="{ prop: 'createDate', order: 'descending' }" style="width: 100%"
@row-click="goDetail">
<el-table-column prop="ranking" label="排名" width="80">
</el-table-column>
<el-table-column prop="bidderName" label="名称">
</el-table-column>
<el-table-column prop="bidAbility" label="能力" width="110" v-if="listType == '1'">
</el-table-column>
<el-table-column prop="bidActivity" label="活跃度" width="110" v-if="listType == '2'">
</el-table-column>
<el-table-column prop="bidRateIndex" label="标率 " width="80">
</el-table-column>
</el-table>
goDetail(row) {
var bidderId = row.bidderId;
this.$router.push({ path: '/biddersDetails', query: { bidderId: bidderId } })
}
3.el-table列表在点击后的背景样式
.el-table__body tr.current-row > td {
background-color: #0831ab !important;
}
4.列表内容超出…显示
/deep/.el-table__row {
td:nth-child(2) { //让每行的第二列内容超出...显示
.cell {
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
}
}
}
5.表格内容的加载样式(v-loading)
<el-table v-loading="loading"></el-table>
loading:true