vue+element-ui 表格嵌套表格的实现
主要是根据element-ui提供的type="expand"属性来实现，数据都是写死的数据哈~~~
<template>
<el-table :data="tableData" style="width: 100%">
<el-table-column prop="children" type="expand">
<template slot-scope="slots">
<el-table :data="slots.row.children" style="width: 100%">
<el-table-column
type="selection"
width="50"
show-overflow-tooltip
reserve-selection
/>
<el-table-column label="11" prop="id" />
<el-table-column label="22" prop="name" />
</el-table>
</template>
</el-table-column>
<el-table-column
type="selection"
width="50"
show-overflow-tooltip
reserve-selection
/>
<el-table-column label="单号" prop="id" />
<el-table-column label="名称" prop="name" />
<el-table-column label="价格" prop="price" />
<el-table-column label="总数量" prop="num" />
</el-table>
</template>
<script>
export default {
data() {
return {
tableData: [
{
id: "1298712333232",
name: "花甲",
price: "15.9",
num: "888",
children: [
{
id: "1", name: "随便" },
{
id: "2", name: "随便2" }
]
},
{
id: "1489033233442",
name: "鸡翅",
price: "152.9",
num: "18",
children: [
{
id: "1", name: "随便" },
{
id: "2", name: "随便2" }
]
},
{
id: "1093443434",
name: "鸡腿",
price: "23.98",
num: "38",
children: [
{
id: "1", name: "随便" },
{
id: "2", name: "随便2" }
]
},
{
id: "19232243434",
name: "小面包",
price: "10.8",
num: "30"
}
]
}
}
}
</script>
<style>
.demo-table-expand {
font-size: 0;
}
.demo-table-expand label {
width: 90px;
color: #99a9bf;
}
.demo-table-expand .el-form-item {
margin-right: 0;
margin-bottom: 0;
width: 50%;
}
</style>
children中有数据正常显示，没有数据展示"暂无数据"。
问题：选择框中，二级表全部选中，一级表格选择框中没有样式，反过来一样。
回头优化，干饭去了，有别的更好的方法请说哈~~~
