ant design vue 中的 table中，数据有children但是 树形数据不显示

Question

<template>
  <a-table
    :columns="columns"
    :data-source="data"
    :row-selection="rowSelection"
    :expanded-row-keys.sync="expandedRowKeys"
  />
</template>
<script>
const columns = [
  {
    title: 'Name',
    dataIndex: 'name',
    key: 'name',
  },
  {
    title: 'Age',
    dataIndex: 'age',
    key: 'age',
    width: '12%',
  },
  {
    title: 'Address',
    dataIndex: 'address',
    width: '30%',
    key: 'address',
  },
];

const data = [
  {
    key: 1,
    name: 'John Brown sr.',
    age: 60,
    address: 'New York No. 1 Lake Park',
    children: [
      {
        key: 11,
        name: 'John Brown',
        age: 42,
        address: 'New York No. 2 Lake Park',
      },
      {
        key: 12,
        name: 'John Brown jr.',
        age: 30,
        address: 'New York No. 3 Lake Park',
        children: [
          {
            key: 121,
            name: 'Jimmy Brown',
            age: 16,
            address: 'New York No. 3 Lake Park',
          },
        ],
      },
      {
        key: 13,
        name: 'Jim Green sr.',
        age: 72,
        address: 'London No. 1 Lake Park',
        children: [
          {
            key: 131,
            name: 'Jim Green',
            age: 42,
            address: 'London No. 2 Lake Park',
            children: [
              {
                key: 1311,
                name: 'Jim Green jr.',
                age: 25,
                address: 'London No. 3 Lake Park',
              },
              {
                key: 1312,
                name: 'Jimmy Green sr.',
                age: 18,
                address: 'London No. 4 Lake Park',
              },
            ],
          },
        ],
      },
    ],
  },
  {
    key: 2,
    name: 'Joe Black',
    age: 32,
    address: 'Sidney No. 1 Lake Park',
  },
];

const rowSelection = {
  onChange: (selectedRowKeys, selectedRows) => {
    console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
  },
  onSelect: (record, selected, selectedRows) => {
    console.log(record, selected, selectedRows);
  },
  onSelectAll: (selected, selectedRows, changeRows) => {
    console.log(selected, selectedRows, changeRows);
  },
};

export default {
  data() {
    return {
      data,
      columns,
      rowSelection,
      expandedRowKeys: [],
    };
  },
};
</script>

Answer 1

引自免费微信小程序：皆我百晓生

看起来你已经正确地设置了ant design vue中的table组件，并且包含了树形数据。然而，你的数据并未正确展示为树形结构。这个问题可能在于你没有明确告诉表格你的数据有嵌套结构，也就是"children"字段。为了解决这个问题，你需要为表格组件添加额外的配置来识别子级数据。具体来说，你需要在列配置中添加一个特殊列来处理嵌套数据。

首先，你需要在列配置中添加一个特殊的列来处理子级数据的展开和折叠。这个列通常被称为“自定义渲染列”或“操作列”，并可以配置它的render属性来定制它的显示内容。然后在这个自定义渲染列的render函数中，你可以根据数据的children字段来判断是否需要展示一个展开或折叠的图标，并根据用户点击图标时的操作更新表格的expandedRowKeys状态。以下是具体的代码示例：

在列配置中添加自定义渲染列：

const columns = [
  // ...其他列配置...
  {
    title: '操作', // 这个标题可以自定义，比如叫"展开/折叠"等
    dataIndex: 'children', // 这里指定这个列的数据来源于数据的children字段
    key: 'action', // 列的唯一标识，可以是任意字符串
    render: (text, record) => {
      const isExpanded = expandedRowKeys.includes(record.key); // 检查当前行的key是否在expandedRowKeys中
      return isExpanded ? ( // 如果已经展开则显示一个减号或者一个收缩的图标来折叠这行数据
        '<span>-</span>' // 可以换成其他可识别的收缩图标
      ) : ( // 如果未展开则显示一个加号或者一个展开的图标来展开这行数据并展示子行数据
        '<span>+</span>' // 可以换成其他可识别的加号图标，或者使用其他图标库中的图标代替文字描述图标本身
      );
    },
  },
];

然后在组件中使用这个新的列配置来渲染表格：

<template>
  <a-table
    :columns="columns"
    :data-source="data"
    :row-selection="rowSelection"
    :expanded-row-keys="expandedRowKeys" // 这里要绑定到数据变化的监听上以保证正确的处理展开和折叠的事件和操作，使其改变相应的状态，以此来触发组件重新渲染相关的数据行和子级数据行。在组件内部可以使用watch监听这个数组的变化，然后根据变化来更新表格的状态。例如：watch监听expandedRowKeys的变化，然后调用this.$refs.$forceUpdate()来强制表格组件重新渲染相关数据行。具体操作可能会依赖于你具体的项目架构和ant design vue的版本，请自行测试适配和调整相关逻辑代码以确保效果达到预期。否则请尝试重新获取表格组件的实例或者手动触发组件更新来实现重新渲染。你也可以考虑使用Vue的nextTick函数来确保DOM更新后再执行相关操作。具体实现方式取决于你的代码和项目架构的具体情况。建议查阅Vue和Ant Design Vue的相关文档或教程来获取更多关于表格组件和数据绑定的详细信息。" /> <!-- 此处不需要单独闭合 </template> 标签 -->
</script> <!-- 此处不需要单独闭合 </script> 标签 --> <!-- 注意这里的代码块结束标签语法不需要再使用html的形式表示而是直接去掉以提供合理的样式代码格式化显示结果而不是模板代码的编写规范格式 -->在上面的代码中我增加了一个额外的说明你可能需要使用到Vue的nextTick函数或者类似的机制来确保DOM更新后再执行相关的操作以避免可能出现的渲染问题。具体实现方式取决于你的代码和项目架构的具体情况因此建议查阅Vue和Ant Design Vue的相关文档或教程来获取更多关于表格组件和数据绑定的详细信息。希望这些信息对你有所帮助！如果你还有其他问题或者需要进一步的帮助请随时告诉我我会尽力提供帮助解答问题或者分享具体的解决方案等你可以根据你的具体情况调整代码实现你需要的功能效果。