Looking at the official documents, expand is a small triangle
And I want to use a custom button to control, as shown in the figure, you can customize the expanded or closed form.
Take a look at the implementation method:
keep the official expand function, but hide its small triangle, and then use a custom button to control the expansion Look at the
code:
For the official expand code, the operation is as follows: set the width to 0, and set the style Hidden, place the content you want to display after expansion in expand.
<el-table-column type="expand" width="0">
<template slot-scope="scope">
<el-table :data="scope.row.info" :show-header="false">
<el-table-column prop="file_name" :label="$t('dc.file_name')" align="center" />
<el-table-column v-if="$CBF(dc_btn.history_download) || $CBF(dc_btn.history_cla)" fixed="right" prop="operation" :label="$t('common.operation')" width="200" align="center" header-align="center">
<template slot-scope="info_scope">
<el-button v-permission="dc_btn.history_download" type="text" @click="download_history(info_scope.row.download_addr)">{
{
$t('common.download') }}</el-button>
<el-button v-permission="dc_btn.history_cla" type="text" @click="to_cla(info_scope.row.cla_addr)">{
{
$t('dc.detail') }}</el-button>
</template>
</el-table-column>
</el-table>
</template>
</el-table-column>
For css:
::v-deep .el-table__expand-icon {
visibility: hidden;
}
Then in the table, it is necessary to set which piece of data the expanded content corresponds to. The row-key is to set a mark, which means that this piece of data is unique. In my table data, the path is unique, and it may also be id Or index, to be determined according to your own table data. Then expand-row-keys is to set an array, which stores the path of the expanded data.
I set it to empty when initializing, that is, there is no expanded data by default.
Then look at the operation, which is the code of my custom expand button:
<el-table-column fixed="right" prop="operation" :label="$t('common.operation')" width="200" align="center" header-align="center">
<template slot-scope="scope">
<div>
<span v-if="!scope.row.expand" class="more-show" @click="expandRow(scope.row)">{
{
$t('common.expand') }}<i class="el-icon-arrow-down" /></span>
<span v-if="scope.row.expand" class="more-show" @click="collapseRow(scope.row)">{
{
$t('common.collapse') }}<i class="el-icon-arrow-up" /></span>
</div>
</template>
</el-table-column>
I added an expand attribute to the data in the table to control whether the current piece of data is expanded.
Look at the control code:
expandRow(row) {
row.expand = true
if (this.expands.indexOf(row.path) < 0) {
this.expands.push(row.path)
}
},
collapseRow(row) {
row.expand = false
this.expands.splice(this.expands.indexOf(row.path), 1)
},
Then you can implement custom controls!
Finally, you can look at my table data, which is more conducive to understanding how to customize settings:
history_table_list: [{
path: 'TradeCode 90',
type: 'DSSAD',
fdi_type: 'DFDI',
start_time: '2023-04-23 12:32:00',
end_time: '2023-04-23 12:33:00',
info: [{
file_name: '123',
cla_addr: 'http://www.baidu.com',
download_addr: ''
}],
expand: false
}, {
path: 'TradeCode 91',
type: 'DSSAD',
fdi_type: 'DFDI',
start_time: '2023-04-23 12:32:00',
end_time: '2023-04-23 12:33:00',
info: [{
file_name: '123',
cla_addr: 'http://www.baidu.com',
download_addr: ''
}, {
file_name: '321',
cla_addr: 'http://www.baidu.com',
download_addr: ''
}],
expand: false
}, {
path: 'TradeCode 93',
type: 'DSSAD',
fdi_type: 'DFDI',
start_time: '2023-04-23 12:32:00',
end_time: '2023-04-23 12:33:00',
info: [{
file_name: '123',
cla_addr: 'http://www.baidu.com',
download_addr: ''
}],
expand: false
}, {
path: 'TradeCode 94',
type: 'DSSAD',
fdi_type: 'DFDI',
start_time: '2023-04-23 12:32:00',
end_time: '2023-04-23 12:33:00',
info: [{
file_name: '123',
cla_addr: 'http://www.baidu.com',
download_addr: ''
}, {
file_name: '321',
cla_addr: 'http://www.baidu.com',
download_addr: ''
}],
expand: false
}],