<template>
<el-table
:data="tableData"
height="70vh"
border
style="width: 100%"
:header-row-style="{
color: 'white',
}"
:row-style="{
color: '#222',
}"
:cell-style="{ textAlign: 'center' }"
:header-cell-style="{
textAlign: 'center',
background: '#7890A2',
border: '1px solid #7890A2',
}"
:row-class-name="tableRowClassName"
>
<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 {
loading: false,
selectedId: "1",
focusNum: "",
train: "",
filterFocus: 1,
tableData: [
{
id: 1,
date: "2016-05-03",
name: "王小虎",
address: "上海市普陀区金沙江路 1518 弄",
},
{
date: "2016-05-02",
name: "王小虎",
address: "上海市普陀区金沙江路 1518 弄",
},
],
};
},
mounted() {
this.tableRowClassName;
},
methods: {
tableRowClassName({ row, rowIndex }) {
if (row.id == this.selectedId) {
return "selected-row";
} else {
return "";
}
},
filterList(e) {
this.filterFocus = e;
},
focusLot(e) {
this.focusNum = e;
console.log(e);
},
},
};
</script>
<style lang="scss">
.selected-row {
background-color: #e4d33d !important;
}
</style>
只要表的高度固定就会在不分页数的情况下,自动滚动