Ant design Vue 去除展开按钮与按钮触发行展开

前言

本文主要记录如何在 Ant design vue 表格中去除展开按钮并在行中添加按钮触发行展开，主要分为两部分：一是去除展开按钮，二是按钮触发行展开。

去除展开按钮

去除展开按钮比较简单，使用 样式穿透 便可。

<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>

复制代码

找到展开按钮涉及的样式，为 .ant-table-row-expand-icon-cell 与 .ant-table-expand-icon-th，并设置 display 属性值为 none。

按钮触发行展开

展开内容设置

在 Ant Design Vue 中，行展开须要添加插槽 expandedRowKeyRender， 此插槽为行展开时展现的内容。

<p slot="expandedRowRender" slot-scope="record" style="margin: 0">{{record.description}}</p>
复制代码

这里处理比较简单，只展现一行数据。

展开逻辑

为了处理展开逻辑。首先，咱们须要设置行的 rowKey 属性。而后，还须要设置表格的 expandedRowKeys 属性并绑定一个数组，所绑定的数组中存放的是当前展开行的 rowKey 值的集合。

<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>
复制代码

在上述代码中，咱们将行数据的 key 值做为表格行的 rowkey，注意：请保证 rowKey 值的惟一性。当行按钮点击时，触发咱们的展开行逻辑处理。行展开逻辑处理以下：

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);
    }
}
复制代码

这里的行处理的核心逻辑是：每次只容许展开表格中的某一行。具体以下：当点击某行按钮时，将当前行数据的 key 传递到点击函数中，并在判断当前点击行是否在绑定数组中存在。若存在，则须要判断点击行是不是已展开行。如果已展开行，则将其关闭，不然，即为打开新行。行的展开与关闭都是经过绑定的 rowKeys 数组操做来实现。

效果

以下：

文末，附上 demo 连接：antd vue 去除展开按钮与按钮触发行展开。