树形结构的tableData如何放进到el-table里面

可以使用递归组件来实现将树形结构的tableData放进到el-table里面。具体步骤如下：

1. 创建一个递归组件，用于递归渲染树形结构的数据。

2. 在递归组件中，使用 v-for 循环遍历树形结构的数据，并将每个子节点作为递归组件的子组件进行渲染。

3. 在递归组件中，使用 el-table 表格组件来渲染表格内容，同时需要根据当前节点的层级来设置表格列的宽度和缩进等样式。

4. 在父组件中，使用递归组件来渲染树形结构的数据。

以下是一个示例代码，仅供参考：

<template>
  <el-table :data="tableData" :row-style="rowStyle">
    <el-table-column :prop="props.label" :label="props.label" :width="props.width"></el-table-column>
    <el-table-column :prop="props.value" :label="props.value"></el-table-column>
    <template v-for="(column, index) in props.columns">
      <el-table-column v-if="index === 0" :key="index" :label="column.label">
        <template slot-scope="scope">
          <span :style="{ paddingLeft: scope.row.level * 20 + 'px' }">{{ scope.row[column.prop] }}</span>
        </template>
      </el-table-column>
      <el-table-column v-else :key="index" :prop="column.prop" :label="column.label"></el-table-column>
    </template>
    <template v-if="props.children">
      <el-table-column :width="props.width" label="">
        <template slot-scope="scope">
          <tree-table :tableData="scope.row[props.children]" :props="props"></tree-table>
        </template>
      </el-table-column>
    </template>
  </el-table>
</template>

<script>
export default {
  name: "tree-table",
  props: {
    tableData: {
      type: Array,
      default: () => []
    },
    props: {
      type: Object,
      default: () => ({
        label: "label",
        value: "value",
        columns: [],
        children: "children",
        width: "150"
      })
    }
  },
  components: {
    TreeTable: () => import("./TreeTable.vue")
  },
  methods: {
    rowStyle(row) {
      return { paddingLeft: row.level * 20 + "px" };
    }
  }
};
</script>

在父组件中，可以使用以下代码来渲染树形结构的数据：

<template>
  <tree-table :tableData="tableData" :props="props"></tree-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          label: "一级节点1",
          value: "value1",
          children: [
            {
              label: "二级节点1-1",
              value: "value1-1",
              children: [
                {
                  label: "三级节点1-1-1",
                  value: "value1-1-1"
                },
                {
                  label: "三级节点1-1-2",
                  value: "value1-1-2"
                }
              ]
            },
            {
              label: "二级节点1-2",
              value: "value1-2"
            }
          ]
        },
        {
          label: "一级节点2",
          value: "value2"
        }
      ],
      props: {
        label: "label",
        value: "value",
        columns: [
          {
            prop: "prop1",
            label: "列1"
          },
          {
            prop: "prop2",
            label: "列2"
          }
        ],
        children: "children",
        width: "150"
      }
    };
  },
  components: {
    TreeTable: () => import("./TreeTable.vue")
  }
};
</script>