用elementUI写一个展开行内嵌table的el-table,内嵌table具有全选和回显功能,生成完整代码
时间: 2023-04-03 08:00:23 浏览: 161
基于element-ui的table表格封装
好的,以下是代码示例:
```
<template>
<el-table :data="tableData" style="width: 100%">
<el-table-column type="expand">
<template slot-scope="props">
<el-table :data="props.row.children" style="width: 100%">
<el-table-column type="selection"></el-table-column>
<el-table-column prop="name" label="名称"></el-table-column>
<el-table-column prop="value" label="数值"></el-table-column>
</el-table>
</template>
</el-table-column>
<el-table-column type="selection"></el-table-column>
<el-table-column prop="name" label="名称"></el-table-column>
<el-table-column prop="value" label="数值"></el-table-column>
</el-table>
</template>
<script>
export default {
data() {
return {
tableData: [
{
name: '一级 1',
value: 'value1',
children: [
{
name: '二级 1-1',
value: 'value1-1'
},
{
name: '二级 1-2',
value: 'value1-2'
}
]
},
{
name: '一级 2',
value: 'value2',
children: [
{
name: '二级 2-1',
value: 'value2-1'
},
{
name: '二级 2-2',
value: 'value2-2'
}
]
}
]
};
}
};
</script>
```
这是一个使用 elementUI 编写的展开行内嵌 table 的 el-table,内嵌 table 具有全选和回显功能的完整代码示例。
阅读全文