ANTDV-仅针对特定行显示扩展图标

Question

我正在使用ANTD进行VUE（ antdv ）版本1.7.8。

我想 例如，我只想向第二个条目显示展开图标（和funcionallity），该项目在项目 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>

我该怎么做？

Answer 1

在antdv v3中存在 roweppandable 参数。
在ANTDV V1中，您可以通过该行的自定义类完成：

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

您可以在此处看到一个示例： https://codesandbox.io/s/antdv2-rowexpandable-wgh7xz?file=/src/src/components/atable.vue

Answer 2

您可以使用RowDatabound事件在儿童网格中没有记录时隐藏图标。
尝试以下所述的示例： https://ej2.syncfusion.com/vue/documentation/grid/how-to/hide-the-the-the-the-the-the--expand-collapse-icon-icon-icon-in-parent-row/ 一下