el-table-column重构expand的样式

看官方给的文档，expand就是一个小三角

而我想用一个自定义的按钮来控制，如图展示，可以自定义展开或关闭的形式。

看看实现方法：
保留官方的expand的功能，但是将它的小三角隐藏起来，然后用自定义的按钮来控制展开
来看代码：
对于官方的expand代码操作如下：设置width为0，并且设置样式隐藏，在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>

对于css:

  ::v-deep .el-table__expand-icon {
    
    
    visibility: hidden;
  }

然后在table里要设置一下展开的内容对应是哪一条数据，row-key是设置一个标记，也就是表示这一条数据是独一无二的，在我的表格数据里，path是独一无二的，也有可能是id或者index，要根据你自己的表格数据来确定。然后expand-row-keys就是设置一个数组，这个数组里存储的就是展开的数据的path

我在初始化的时候设置为空，也就是默认没有展开的数据。

然后看操作里，也就是我自定义展开按钮的代码：

  <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>

我给table里的数据多加了一个expand属性，来控制当前这条数据是否展开。
看看控制的代码：

    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)
    },

然后就可以进行实现自定义控制啦！

最后可以看看我的表格数据，更有利于理解如何进行自定义设置：

      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
      }],