公式サイトでは直接ご利用いただけます
単純なヘッダーの場合は直接使用します。複合ヘッダーの場合は、複合ヘッダーの下にテンプレートを追加し、複合ヘッダーのコードを直接追加します。
<el-table-column prop="title" :label="title" align="center">
<template slot-scope="scope" slot="header">
<el-select size="mini" v-model="selectArea" @change="selectAreaChange" placeholder="请选择">
<el-option
v-for="item in optionAreas"
:key="item.value"
:label="item.label"
:value="item.value"
></el-option>
</el-select>
<el-select size="mini" v-model="selectYear" @change="selectYearChange" placeholder="请选择">
<el-option
v-for="item in optionYears"
:key="item.value"
:label="item.label"
:value="item.value"
></el-option>
</el-select>
<div class="titleDiv">xxx</div>
</template>
<el-table-column prop="all" label="xx" min-width="20%">
<template slot-scope="scope">
<span>{
{ scope.row.all }}</span>
</template>
</el-table-column>
//省略其他代码
</el-table-column>
最終効果