Requirements: 1. Realize the dynamic display function of the table header according to the selected date and time
2. Modify the default header gray style,
3. Zebra pattern even number gray is changed to odd number gray
4. Add a dividing line to a row of the table to distinguish
1. Effect
2. Realization of dynamic form
1. height: the height setting of the table, the scroll bar will be displayed after the content exceeds, and the height is fixed
2. :row-class-name: row class name, used to set zebra pattern
These two are the time, a start time and an end time, displayed on the header
<div v-if="scope.column.property === 'start' && contrastTime.length > 0">
{
{ startdata }}
</div>
<div v-else-if="scope.column.property === 'end' && contrastTime.length > 0">
{
{ enddata }}
</div>1. type="datetimerange": Indicates that it is a time and date selector
2. :picker-options="pickerOptions", add a quick date option to the picker, last week, last month, last three months
3. value-format="yyyy-MM-dd HH:mm:ss", after selection, the time and date will be automatically changed to "yyyy-MM-dd HH:mm:ss" format
<el-date-picker
v-model="contrastTime"
type="datetimerange"
align="right"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
@change="updateTableHeader"
:picker-options="pickerOptions"
value-format="yyyy-MM-dd HH:mm:ss"
></el-date-picker>What is the class name for the zebra pattern to select odd or even numbers based on the index of the row?
setRowClassName({ rowIndex }) {
return rowIndex % 2 === 0 ? 'even-row' : 'odd-row';
},3. Complete code
<!--
* @Descripttion: el-table实现动态表头，自定义斑马纹等功能
* @Author: 叫我欧皇大人
* @email: [email protected]
* @Date: 2023-07-14
-->
<template>
<div class="content-box">
<div class="container">
<div class="header">
<el-date-picker
v-model="contrastTime"
type="datetimerange"
align="right"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
@change="updateTableHeader"
:picker-options="pickerOptions"
value-format="yyyy-MM-dd HH:mm:ss"
></el-date-picker>
</div>
<el-table :data="tableData" height="calc(100vh - 64px - 130px - 200px)" :row-class-name="setRowClassName">
<el-table-column
v-for="(header, index) in tableHeaders"
:key="header.prop"
:prop="header.prop"
:label="header.label"
:width="header.width"
align="center"
>
<template slot="header" slot-scope="scope">
<div>{
{ header.label }}</div>
<div v-if="scope.column.property === 'start' && contrastTime.length > 0">
{
{ startdata }}
</div>
<div v-else-if="scope.column.property === 'end' && contrastTime.length > 0">
{
{ enddata }}
</div>
</template>
</el-table-column>
</el-table>
</div>
</div>
</template>
<script>
export default {
data() {
return {
startdata: '',
enddata: '',
tableData: [
{ name: '数据1', start: 'A-B-C', end: '结束数据', age: 18 },
{ name: '数据1', start: 'A-B-C', end: '结束数据', age: 18 },
{ name: '数据1', start: 'A-B-C', end: '结束数据', age: 18 },
{ name: '数据1', start: 'A-B-C', end: '结束数据', age: 18 }
],
tableHeaders: [
{ prop: 'name', label: '姓名', width: '200' },
{ prop: 'start', label: '开始', width: '200' },
{ prop: 'end', label: '结束', width: '200' },
{ prop: 'age', label: '年龄', width: '80' }
],
contrastTime: [],
pickerOptions: {
shortcuts: [
{
text: '最近一周',
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
picker.$emit('pick', [start, end]);
}
},
{
text: '最近一个月',
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
picker.$emit('pick', [start, end]);
}
},
{
text: '最近三个月',
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
picker.$emit('pick', [start, end]);
}
}
]
}
};
},
mounted() {},
methods: {
// 斑马纹
setRowClassName({ rowIndex }) {
return rowIndex % 2 === 0 ? 'even-row' : 'odd-row';
},
updateTableHeader() {
this.startdata = this.contrastTime[0];
this.enddata = this.contrastTime[1];
}
}
};
</script>
<style lang="scss" scoped>
.header {
margin-bottom: 50px;
margin-left: 300px;
}
/deep/ .el-table thead th {
background-color: #fff !important;
color: #000000;
font-weight: bold;
}
// 斑马纹
/deep/ .even-row {
background-color: #f5f5f5; /* 偶数行为灰色 */
}
/deep/ .odd-row {
background-color: #fff; /* 奇数行为白色 */
}
// 给表格加竖线
/deep/ .el-table tbody tr td:nth-child(1) {
border-right: 1px solid #e2e3e6;
}
</style>
This is the end of the article, I hope it will be helpful to you~