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 去除展開按鈕與按鈕觸發行展開。