vue多级列表格

Vue多级列表格可以通过递归组件来实现。首先，你需要定义一个组件用来渲染每一行数据，代码如下：

<template>
  <tr>
    <td>{{ data.name }}</td>
    <td>{{ data.value }}</td>
  </tr>
</template>

<script>
export default {
  props: {
    data: {
      type: Object,
      required: true
    }
  }
}
</script>

然后，你需要定义一个父组件用来渲染整个多级列表格。在父组件中，你需要定义一个数据数组，用来存储所有的数据。在父组件的模板中，你需要使用递归组件来渲染每一层数据。代码如下：

<template>
  <table>
    <thead>
      <tr>
        <th>Name</th>
        <th>Value</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="item in data" :key="item.id">
        <td>{{ item.name }}</td>
        <td>{{ item.value }}</td>
      </tr>
      <tr v-for="item in data" :key="item.id + '-child'">
        <td colspan="2">
          <table>
            <tbody>
              <recursive-table :data="item.children" />
            </tbody>
          </table>
        </td>
      </tr>
    </tbody>
  </table>
</template>

<script>
import RecursiveTable from './RecursiveTable.vue'

export default {
  components: {
    RecursiveTable
  },
  data () {
    return {
      data: [
        {
          id: 1,
          name: 'Category 1',
          value: 10,
          children: [
            {
              id: 2,
              name: 'Subcategory 1.1',
              value: 5,
              children: []
            },
            {
              id: 3,
              name: 'Subcategory 1.2',
              value: 5,
              children: []
            }
          ]
        },
        {
          id: 4,
          name: 'Category 2',
          value: 20,
          children: [
            {
              id: 5,
              name: 'Subcategory 2.1',
              value: 10,
              children: []
            },
            {
              id: 6,
              name: 'Subcategory 2.2',
              value: 10,
              children: [
                {
                  id: 7,
                  name: 'Sub-subcategory 2.2.1',
                  value: 5,
                  children: []
                },
                {
                  id: 8,
                  name: 'Sub-subcategory 2.2.2',
                  value: 5,
                  children: []
                }
              ]
            }
          ]
        }
      ]
    }
  }
}
</script>

在这个例子中，我们使用了一个递归组件 `RecursiveTable` 来渲染每一层数据。当一个数据对象有子数据时，我们就使用 `RecursiveTable` 组件来渲染子数据。这样就可以实现多级列表格的效果。