Ant Design Vue 展开行

只展开当前行

table 中重要的属性如下：

参数	说明
rowKey	表格行 key 的取值，可以是字符串或一个函数
expandedRowKeys	展开的行，控制属性。
expandedRowRender	额外的展开行

实现案例如下：

const columns = function (h) {
  return [
    { title: "姓名", dataIndex: "name", key: "name", width: 100 },
    { title: "年龄", dataIndex: "age", key: "age", width: 50 },
    { title: "地址", dataIndex: "address", key: "address", width: 80 },
    {
      title: "Action",
      dataIndex: "",
      key: "x",
      width: 80，
      customRender: (text, record, index) => {
        <a-button icon="plus" on-click={this.handleDetail.bind(this, { text, record, index })}/>
      }
    }
  ]
},
methods: {
  // 操作栏
  handleDetail ({ record }, e) {
    e.stopPropagation()
    this.handleExpand(record[this.rowKey])
  },
  // 展开
  handleExpand (rowkey) {
    // 只允许当行展开逻辑
    if (this.expandedRowKeys.length > 0) {
      let index = this.expandedRowKeys.indexOf(rowkey)
      if (index > -1) {
        this.expandedRowKeys.splice(index, 1)
      } else {
        this.expandedRowKeys.splice(0, this.expandedRowKeys.length)
        this.expandedRowKeys.push(rowkey)
      }
    } else {
      this.expandedRowKeys.push(rowkey)
    }
  },
},
render () {
  return <a-table
    attrs={{ ...this.$attrs }}
    scroll={{ x: 1500, y: 400 }}
    rowKey={this.rowKey} columns={columns.call(this, h)}
    dataSource={this.getList}
    expandedRowKeys={this.expandedRowKeys}
    expandIcon={() => null}
    expandedRowRender={record => <extend-param mode="detail" attrs={{ ...this.$attrs }} />}
  />
}

隐藏前边的加号

1. 方法一

.table .ant-table-expand-icon-th,
.table .ant-table-row-expand-icon-cell {
  width: 0px;
  padding: 0px !important;
  display: none !important;
}

2. 方法二

expandIcon 为自定义展开图标。返回 null，去除展开图标。

<a-table ref="detailTable" table-name="detailTable"
  ......
  expandIcon={() => null}
/>

自定义展开图标

<a-table ref="detailTable" table-name="detailTable"
  ......
  expandIcon={(this.expandIcon}
/>

expandIcon (props) {
  if (props.expanded) {
    return <a-icon type='down' onClick={e => {
      props.onExpand(props.record, e);
      let index = this.expandedRowKeys.indexOf(props.record[this.rowKey]);
      this.expandedRowKeys.splice(index, 1);
    }} />;
  } else {
    return <a-icon type='right' onClick={e => {
      props.onExpand(props.record, e);
      this.handleExpand(props.record[this.rowKey])
    }} />;
  }
}