需求：1.根據(jù)選擇的日期時(shí)間，實(shí)現(xiàn)表頭的動(dòng)態(tài)顯示功能
? ? ? ? ? ?2.修改默認(rèn)表頭灰色樣式，
? ? ? ? ? ?3.斑馬紋偶數(shù)灰色改為奇數(shù)為灰色
? ? ? ? ? ?4.表格某一行加分割線區(qū)分
1.效果
?2.動(dòng)態(tài)表格實(shí)現(xiàn)
1.height：表格的高度設(shè)置，內(nèi)容超出后會(huì)顯示滾動(dòng)條，高度固定
2.:row-class-name：行類名，用作設(shè)置斑馬紋
這倆個(gè)就是時(shí)間了一個(gè)開始一個(gè)結(jié)束時(shí)間，在表頭顯示
<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"：表示是時(shí)間日期選擇器
2.:picker-options="pickerOptions"，給選擇器加上個(gè)快捷的日期選項(xiàng)，最近一周，最近一個(gè)月，最近三個(gè)月
3.? ? value-format="yyyy-MM-dd HH:mm:ss"，選擇好后自動(dòng)把時(shí)間和日期改為"yyyy-MM-dd HH:mm:ss這種格式
<el-date-picker
v-model="contrastTime"
type="datetimerange"
align="right"
range-separator="至"
start-placeholder="開始日期"
end-placeholder="結(jié)束日期"
@change="updateTableHeader"
:picker-options="pickerOptions"
value-format="yyyy-MM-dd HH:mm:ss"
></el-date-picker>斑馬紋根據(jù)行的index來(lái)選擇奇數(shù)或者偶數(shù)的類名是什么文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-562952.html
setRowClassName({ rowIndex }) {
return rowIndex % 2 === 0 ? 'even-row' : 'odd-row';
},3.完整代碼
<!--
* @Descripttion: el-table實(shí)現(xiàn)動(dòng)態(tài)表頭，自定義斑馬紋等功能
* @Author: 叫我歐皇大人
* @email: 13071200550@163.com
* @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="結(jié)束日期"
@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: '數(shù)據(jù)1', start: 'A-B-C', end: '結(jié)束數(shù)據(jù)', age: 18 },
{ name: '數(shù)據(jù)1', start: 'A-B-C', end: '結(jié)束數(shù)據(jù)', age: 18 },
{ name: '數(shù)據(jù)1', start: 'A-B-C', end: '結(jié)束數(shù)據(jù)', age: 18 },
{ name: '數(shù)據(jù)1', start: 'A-B-C', end: '結(jié)束數(shù)據(jù)', age: 18 }
],
tableHeaders: [
{ prop: 'name', label: '姓名', width: '200' },
{ prop: 'start', label: '開始', width: '200' },
{ prop: 'end', label: '結(jié)束', 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: '最近一個(gè)月',
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
picker.$emit('pick', [start, end]);
}
},
{
text: '最近三個(gè)月',
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; /* 偶數(shù)行為灰色 */
}
/deep/ .odd-row {
background-color: #fff; /* 奇數(shù)行為白色 */
}
// 給表格加豎線
/deep/ .el-table tbody tr td:nth-child(1) {
border-right: 1px solid #e2e3e6;
}
</style>
文章到此結(jié)束，希望對(duì)你有所幫助~文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-562952.html
到了這里，關(guān)于el-table實(shí)現(xiàn)動(dòng)態(tài)表頭，自定義斑馬紋等功能的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
