Antdv -仅显示特定行的展开图标

Question

我在vue (安得夫)版本1.7.8中使用antd。

我只想对满足给定条件的行进行显示展开图标。

例如，我只想为第二个条目显示展开图标(和funcionallity)，它在items数组中有项：

​

var Main = {
   data() {
      return {
         columns: [{
               title: 'ID',
               dataIndex: 'id',
            },
            {
               title: 'Name',
               dataIndex: 'name',
            },
            {
               title: 'Nº items',
               dataIndex: 'items',
               scopedSlots: {
                  customRender: 'items'
               },
            },

         ],
         tableData: [{
               "id": 1,
               "name": "Alex",
               "items": []
            },
            {
               "id": 2,
               "name": "Boris",
               "items": [{
                     "id": 1,
                     "name": "Don Quixote"
                  },
                  {
                     "id": 2,
                     "name": "Moby Dick"
                  }
               ]
            },
            {
               "id": 3,
               "name": "Carlos",
               "items": []
            }
         ]
      }
   }
}
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.9/vue.js"></script>
<script src="https://unpkg.com/vue@2.6.14/dist/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ant-design-vue/1.7.8/antd.min.js" integrity="sha512-o1PLXMVDD8r7lQlPXWHTyJxH7WpFm75dsSfzsa04HRgbeEHJv/EbaxEgACaB6mxbBmHU+Dl64MflqQB7cKAYpA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ant-design-vue/1.7.8/antd.css" integrity="sha512-Zl/2o30l4LayZodj2IuRoBhZLgQNvKnnSTwB08236BoPAhbhhS8dZltQfyftSVdEVrJ43uSyh/Keh1t/5yP5Ug==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<div id="app">
  <template>
    <a-table
      :columns="columns"
      :row-key="record => record.id"
      :data-source="tableData"
      :pagination="{hideOnSinglePage:true}"
      :expand-icon-as-cell="false"
      :expand-icon-column-index="2"
      :expand-row-by-click="false"
    >
      <p slot="expandedRowRender" slot-scope="record">
        <template v-if="record.items.length === 0">
          Should not be rendered
        </template>
        <template v-else>
          An inner table with {{ record.items.length }} items.
        </template>
        
      </p>
      <template slot="items" slot-scope="items, record">
        {{ record.items.length }}
        <template v-if="record.items.length === 0">
          (&larr; Should not render expand button)
        </template>
      </template>
    </a-table>
  </template>
</div>

​

我该怎么做呢？

Answer 1

当子网格中没有记录时，可以使用rowDataBound事件隐藏图标。试试下面描述的示例：https://ej2.syncfusion.com/vue/documentation/grid/how-to/hide-the-expand-collapse-icon-in-parent-row/

Answer 2

在Antdv中，v3存在rowExpandable参数。在Antdv v1中，可以通过行的自定义类：

:row-class-name="(record) => record.items.length > 0 ? 'show' : 'hide'"

您可以在这里看到一个例子：https://codesandbox.io/s/antdv2-rowexpandable-wgh7xz?file=/src/components/aTable.vue