Ant Design Vue 嵌套表格每次仅展开一行

Posted 2021-09-13 format2018

具体操作

参考来源：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=[]