antd table 可展开行的多种控制

table中有可展开行，可以点击前面的加减号实现，也可以自己在操作列中增加“展开收起”的操作按钮，注意当添加了自己的“展开收起”后，原来的可能会失效，所以我将代码全部处理了。

 <a-table
              :columns="sourcesTableColumns"
              :pagination="false"
              :data-source="SourceList"
              :expandedRowKeys="expandedRowKeys"
              :rowKey="(record,index)=>{return record.id}"  
              @expand="onExpand"
              bordered
            >
              <template slot="action" slot-scope="text, record, index">
                 <a href="javascript:;" class="add" @click="handleExpand(record)" v-else>{{expandedRowKeys.indexOf(record.id)==-1?'展开':'收起'}}</a>
              </template>
              <p slot="expandedRowRender" slot-scope="record"  >
                {{ record.content }} />
              </p>
            </a-table>

 data() {
    return {
      sourcesTableColumns: sourcesTableColumns,
      expandedRowKeys:[] // table - 展开的行
    };
  },
 handleExpand(record) {
      let key = record.id;
      if (this.expandedRowKeys.length > 0) {
        let index = this.expandedRowKeys.indexOf(key);
        if (index > -1) {
          this.expandedRowKeys.splice(index, 1);
        } else {
          this.expandedRowKeys = [];
          this.expandedRowKeys.push(key);
        }
      } else {
        this.expandedRowKeys.push(key);
      }
    },
    onExpand (expanded, record) {
      if (expanded) {
        this.expandedRowKeys.push(record.id)
      } else {
        this.expandedRowKeys.splice(this.expandedRowKeys.indexOf(record.id), 1)
      }
    },

原文地址：https://blog.csdn.net/reembarkation/article/details/142460735

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！