层级结构+展开行无法进行正确行展开

[kedi98371]

展开所有树 关闭所有树展开 展开所有行 关闭所有行展开

<vxe-table
  border
  ref="tableRef"
  :tree-config="{rowKey: 'id', children: 'children'}"
  :expand-config="{visibleMethod, trigger: 'cell', showIcon: true
                   , iconOpen:'el-icon-minus', iconClose:'el-icon-plus', padding: true}"
  :data="tableData">
  <vxe-column type="checkbox" width="40" field="checkbox" align="center">
    <template #footer="{ row }" >
      <span style="font-weight: 700;">{{ row.propertyName }}</span>
    </template>
  </vxe-column>
  <vxe-column type="expand"  width="80" field="expand" align="center">
    <template #content="{ row }" >
      <ul class="expand-wrapper">
        <li>
          <span>ID：</span>
          <span>{{ row.id }}</span>
        </li>
        <li>
          <span>Name：</span>
          <span>{{ row.name }}</span>
        </li>
        <li>
          <span>Date</span>
          <span>{{ row.date }}</span>
        </li>
      </ul>
    </template>
  </vxe-column>
  <vxe-column field="name" title="Name" tree-node></vxe-column>
  <vxe-column field="size" title="Size"></vxe-column>
  <vxe-column field="type" title="Type"></vxe-column>
  <vxe-column field="date" title="Date"></vxe-column>
</vxe-table>

<script> export default { name: "OwnerByCheck", data() { const tableData = [ { id: 10050, parentId: null, name: 'Test2', type: 'mp4', size: 0, date: '2021-04-01', children:[ { id: 24300, parentId: 10050, name: 'Test3', type: 'avi', size: 1024, date: '2020-03-01' } ] }, ]; return { tableData }; }, methods: { expandAllTreeEvent() { const $table = this.$refs.tableRef; if ($table) { $table.setAllTreeExpand(true); } }, claseExpandTreeEvent() { const $table = this.$refs.tableRef; if ($table) { $table.clearTreeExpand(); } }, expandAllRowEvent() { const $table = this.$refs.tableRef; if ($table) { $table.setAllRowExpand(true); } }, visibleMethod({ row }) { return row.parentId; }, clearExpandRowEvent() { const $table = this.$refs.tableRef; if ($table) { $table.clearRowExpand(); } } } }; </script>

子项行无法展开