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

Question

我在vue (antdv) 1.7.8版本中使用antd。

我希望仅为满足给定条件的行显示展开图标。
例如，我想仅为第二个条目显示扩展图标(和功能)，该条目在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

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

Answer 2

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