elementui 树形数据递归table

elementui树形数据递归table在Vue.js的开发中，使用ElementUI库来创建交互性的组件是一种常见做法。ElementUI提供了丰富的组件，其中包括了树形结构的展示组件，并且还提供了递归表格（RecursiveTable）的实现方式。本文将介绍如何使用ElementUI来创建树形数据的递归表格。

首先，我们需要准备一个有层级关系的数据。这个数据可以是一个数组，每个元素代表一条数据，并且每个元素都包含一个children属性，用来表示当前数据的子节点。以下是一个示例数据：

```javascript

consttreeData=[

{

id:1,

name:'节点1',

children:[

{

id:11,

name:'节点1-1',

children:[]

},

{

id:12,

name:'节点1-2',

children:[

{

id:121,

name:'节点1-2-1',

children:[]

},

{

id:122,

name:'节点1-2-2',

children:[]

}

]

}

]

},

{

id:2,

name:'节点2',

children:[]

}

];

```

接下来，我们需要在Vue组件中使用ElementUI的`<el-table>`和`<template>`来创建递归表格。具体实现如下：

```html

<template>

<div>

<el-table:data="tableData"border>

<el-table-columntype="index"></el-table-column>

<el-table-columnprop="name"label="名称"></el-table-column>

<el-table-columnlabel="操作">

<templateslot-scope="scope">

<el-buttontype="primary"size="mini">编辑</el-button>

<el-buttontype="danger"size="mini">删除</el-button>

</template>

</el-table-column>

<templatev-for="colindynamicColumns">

<el-table-column:label="col.label":prop="p"></el-table-column>

</template>

</el-table>

</div>

</template>

<script>

exportdefault{

data(){

return{

tableData:[],

dynamicColumns:[]

};

},

mounted(){

this.tableData=this.normalizeData(treeData);

this.dynamicColumns=this.getDynamicColumns(treeData);

},

methods:{

normalizeData(data){

letresult=[];

data.forEach(item=>{

result.push(item);

if(item.children.length>0){

result=result.concat(this.normalizeData(item.children));

}

});

returnresult;

},

getDynamicColumns(data){

letcolumns=[];

data.forEach(item=>{

if(item.children.length>0){

columns.push({

label:'子级名称',

prop:`name${item.id}`

});

columns=columns.concat(this.getDynamicColumns(item.children));

}

});

returncolumns;

}

}

};

</script>

```

在上面的代码中，我们使用了Vue的计算属性`tableData`和`dynamicColumns`来获取处理后的表格数据和动态列数据。在`mounted`钩子函数中，我们分别调用了`normalizeData`和`getDynamicColumns`方法来处理原始数据，使其适应于ElementUI的表格的要求。

`normalizeData`方法使用递归的方式将层级关系的数据展开成一维数组。`getDynamicColumns`方法同样使用递归的方式获取所有层级的动态列数据。

在模板中，我们使用了`<el-table>`来创建表格，并通过`:data`将处理后的数据传递给表格组件。然后，我们使用`<el-table-column>`来创建表格的列。在示例中，我们创建了两种类型的列，一种是普通的列，一种是动态列。

普通的列使用`prop`属性来指定要显示的数据字段。动态列使用`v-for`指令来遍历动态列数据，并使用`:label`和`:prop`来指定列的标题和数据字段。

除了基础的表格操作，我们还可以在`<template>`中添加其他的HTML内容，例如上述代码中的操作按钮。通过使用`slot-