How to merge element table header

clipboard.png

merge the data of the two columns of check-in date and departure date into one column

Apr.02,2021

use the slot of vue, the code is as follows

<el-table-column prop="date" label="">
    <template slot-scope="scope">
        <span>{{scope.row.checkInDate}} ~ {{scope.row.checkOutDate}}</span>
    </template>
</el-table-column>

if you want to customize the date format, you can add a vue filter to format the date. Sample code:

    {{scope.row.checkInDate | formatDate}}

according to the alsowen answer, post my code

   

Menu