关于vue.js:Ant-Design-Vue-嵌套表格每次仅展开一行

具体操作

参考起源：https://codesandbox.io/embed/…

Ant Design Vue 嵌套表格是没有开展一行收起另外一行，这样会导致数据的净化。官网 demo 也没波及到该点。

1、在 table 三个重要属性
:rowKey=”(record) => record.key”
:expandIcon=”expandIcon”
:expandedRowKeys=”curExpandedRowKeys”

<a-table
      :rowKey="(record) => record.key"
      :expandIcon="expandIcon"
      :expandedRowKeys="curExpandedRowKeys"
      :columns="columns"
      :data-source="data"
      :pagination="false"
      size="small"
      class="components-table-demo-nested"
      bordered
    >
    ....
</a-table>

2、data 处初始化

 data() {
  return {curExpandedRowKeys: [],
   }
 }     

3、我用的是 expandIcon 更换了开展与收起图标

expandIcon(props) {if (props.expanded) {
    return <a-icon type='down' style="color:#bfbfbf" onClick={e => {props.onExpand(props.record, e);
      let index = this.curExpandedRowKeys.indexOf(props.record.key);
      this.curExpandedRowKeys.splice(index, 1);
    }} />;
  } else {
    return <a-icon type='right' style="color:#bfbfbf" onClick={e => {props.onExpand(props.record, e);
      if (this.curExpandedRowKeys.length > 0) {let index = this.curExpandedRowKeys.indexOf(props.record.key);
        if (index > -1) {this.curExpandedRowKeys.splice(index, 1);
        } else {this.curExpandedRowKeys.splice(0, this.curExpandedRowKeys.length);
          this.curExpandedRowKeys.push(props.record.key);
        }
      } else {this.curExpandedRowKeys.push(props.record.key);
      }
    }} />;
  }
},

总结

curExpandedRowKeys: [], // 属性很要害    

像咱们做嵌套表格下面个别还有配有查问条件，查问的时候肯定记得执行一下 curExpandedRowKeys 置空。不然用户开展嵌套表浏览后再去查问，嵌套表格是开展的。没有收起的成果。

this.curExpandedRowKeys=[]