el-true如何放入el-table
时间: 2023-12-01 14:41:04 浏览: 30
可以使用elementUI中的el-table和el-tree组件来实现el-tree放入el-table中。具体实现步骤如下:
1.在el-table中添加一个列,该列的类型为template,template中包含el-tree组件。
2.在el-tree组件中设置data属性为树形结构的数据源,设置props属性为{label: 'name', children: 'children'},其中label为节点显示的文本,children为子节点的属性名。
3.在el-tree组件中设置node-key属性为节点的唯一标识符,例如'id'。
4.在el-tree组件中设置@node-click事件,该事件会在节点被点击时触发,可以在该事件中获取到当前节点的数据。
下面是一个示例代码,其中tableDataList为el-table的数据源,tableColumnList为el-table的列定义:
```html
<template>
<el-table :data="tableDataList" :columns="tableColumnList">
<el-table-column label="树形结构">
<template slot-scope="scope">
<el-tree
:data="scope.row.treeData"
:props="{label: 'name', children: 'children'}"
node-key="id"
@node-click="handleNodeClick"
></el-tree>
</template>
</el-table-column>
</el-table>
</template>
<script>
export default {
data() {
return {
tableDataList: [
{
id: 1,
name: '节点1',
treeData: [
{
id: 11,
name: '节点1-1',
children: [
{
id: 111,
name: '节点1-1-1'
},
{
id: 112,
name: '节点1-1-2'
}
]
},
{
id: 12,
name: '节点1-2'
}
]
},
{
id: 2,
name: '节点2',
treeData: [
{
id: 21,
name: '节点2-1'
},
{
id: 22,
name: '节点2-2'
}
]
}
],
tableColumnList: [
{
prop: 'id',
label: 'ID'
},
{
prop: 'name',
label: '名称'
}
]
}
},
methods: {
handleNodeClick(data) {
console.log(data)
}
}
}
</script>
```