preface

This article describes how to remove the expansion button from the Ant Design Vue table and add a pushbutton expansion to the row. It is divided into two parts: removing the expansion button and pushbutton expansion.

Unexpand button

Removing the expand button is easy, just use style penetration.

<style scoped>
.table /deep/ .ant-table-row-expand-icon-cell..table /deep/ .ant-table-expand-icon-th {
  width: 0;
  border-right: 0 ! important;
  display: none;
}
</style>

Copy the code

Find the styles involved in the expand button,.ant-table-row-expandor-icon-cell and.ant-table-expandor-icon-th, and set the display property value to None.

Press the button to launch

Expand content Settings

In Ant Design Vue, row expansion requires the addition of a slot expandedRowKeyRender, which is what is displayed when the row is expanded.

 <p slot="expandedRowRender" slot-scope="record" style="margin: 0">{{record.description}}</p>
Copy the code

It’s a little easier here, just showing one line of data.

A logical

To handle the expansion logic. First, we need to set the rowKey property of the row. Then, you need to set the expandedRowKeys property of the table and bind an array containing the set of rowKey values for the currently expanded row.

<a-table
      :columns="columns"
      :dataSource="data"
      :expandedRowKeys="curExpandedRowKeys"
      :rowKey="record => record.key"
    >
      <a-button
        icon="plus"
        type="primary"
        slot="action"
        slot-scope="record"
        @click="handleExpand(record.key)"
      ></a-button>
      <p slot="expandedRowRender" slot-scope="record" style="margin: 0">{{record.description}}</p>
    </a-table>
Copy the code

In the above code, we treat the key value of the row data as the rowkey of the table row. Note: Ensure that the rowkey value is unique. When the row button is clicked, it triggers our expanded row logic processing. The row expansion logic is as follows:

handleExpand(rowkey) {
    if (this.curExpandedRowKeys.length > 0) {
        let index = this.curExpandedRowKeys.indexOf(rowkey);
        if (index > -1) {
            this.curExpandedRowKeys.splice(index, 1);
        } else {
            this.curExpandedRowKeys.splice(0.this.curExpandedRowKeys.length);
            this.curExpandedRowKeys.push(rowkey); }}else {
        this.curExpandedRowKeys.push(rowkey); }}Copy the code

The core logic of row processing here is that only one row in the table is allowed to be expanded at a time. When a row button is clicked, the key of the current row data is passed to the click function, and whether the current row exists in the binding array is determined. If so, you need to determine whether the clicked row is already expanded. If a row is already opened, it is closed; otherwise, a new row is opened. Rows are expanded and closed through the bound rowKeys array operations.

The effect

As follows:

At the end of the article, I attached a link to the demo: ANTD Vue remove the expansion button and the button touch release expansion.