Antdv - show expand icon only for specific rows

Question

I am using antd for vue (antdv) version 1.7.8.

I would like to show expand icon only for rows that satisfy a given condition.
For example, I want to show expand icon (and funcionallity) only for second entry, which has items in items array:

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/[email protected]/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>

How can I do it?

Answer 1

You can use rowDataBound event to hide the icon when there are no records in child grid. Try the example as described here: https://ej2.syncfusion.com/vue/documentation/grid/how-to/hide-the-expand-collapse-icon-in-parent-row/

Answer 2

In Antdv v3 exist rowExpandable argument. In Antdv v1 you can make it through a custom class for the row:

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

you can see an example here: https://codesandbox.io/s/antdv2-rowexpandable-wgh7xz?file=/src/components/aTable.vue