要件: 1. 選択された日付と時刻に応じたテーブルヘッダーの動的表示機能を実現します。
2. デフォルトのヘッダーの灰色のスタイルを変更します。
3. ゼブラパターンの偶数グレーを奇数グレーに変更
4. 表の行に区切り線を追加して区別します。
1.効果
2.ダイナミックなフォルムの実現
1.高さ:テーブルの高さ設定。コンテンツがそれを超えるとスクロールバーが表示され、高さは固定されます。
2. :row-class-name:ゼブラパターンの設定に使用される行クラス名
これら 2 つは、ヘッダーに表示される開始時刻と終了時刻です。
<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 か月のクイック日付オプションをピッカーに追加します。
3. value-format="yyyy-MM-dd HH:mm:ss"、選択後、時刻と日付は自動的に「yyyy-MM-dd HH:mm:ss」形式に変更されます。
<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>行のインデックスに基づいて奇数または偶数を選択するゼブラ パターンのクラス名は何ですか?
setRowClassName({ rowIndex }) {
return rowIndex % 2 === 0 ? 'even-row' : 'odd-row';
},3. 完全なコード
<!--
* @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>
これで記事は終わりです、お役に立てば幸いです~