需求：1.根据选择的日期时间，实现表头的动态显示功能

           2.修改默认表头灰色样式，

           3.斑马纹偶数灰色改为奇数为灰色

           4.表格某一行加分割线区分

1.效果

 2.动态表格实现

1.height：表格的高度设置，内容超出后会显示滚动条，高度固定

2.:row-class-name：行类名，用作设置斑马纹

这俩个就是时间了一个开始一个结束时间，在表头显示

  <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"：表示是时间日期选择器

2.:picker-options="pickerOptions"，给选择器加上个快捷的日期选项，最近一周，最近一个月，最近三个月

3.    value-format="yyyy-MM-dd HH:mm:ss"，选择好后自动把时间和日期改为"yyyy-MM-dd HH:mm:ss这种格式

  <el-date-pickerv-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>

斑马纹根据行的index来选择奇数或者偶数的类名是什么

       setRowClassName({ rowIndex }) {return rowIndex % 2 === 0 ? 'even-row' : 'odd-row';},

3.完整代码

<!--* @Descripttion: el-table实现动态表头，自定义斑马纹等功能* @Author: 叫我欧皇大人* @email: 13071200550@163.com* @Date: 2023-07-14 
-->
<template><div class="content-box"><div class="container"><div class="header"><el-date-pickerv-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-columnv-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>

文章到此结束，希望对你有所帮助~