GitHub Demo 地址
在线预览
效果图
方式一效果图
方式二效果图
要点
使用
el-table的span-method方法配合css样式实现展开与折叠
方式一代码
<template>
<div class="app-container">
<el-table :data="tableData" style="width: 100%;margin-bottom: 20px;" :span-method="arraySpanMethod" row-key="id" border>
<el-table-column type="expand">
<template slot-scope="props">
<el-table class="table-in-table" :show-header="false" :data="props.row.datas" style="width: 100%;" row-key="id" :span-method="arraySpanMethod" border>
<el-table-column type="expand">
<template slot-scope="props2">
<el-table class="table-in-table" :data="props2.row.datas" style="width: 100%;" row-key="id" border>
<el-table-column prop="date" label="下单日期" width="180" />
<el-table-column prop="type" label="单据类型" width="180" />
<el-table-column prop="status" label="状态" />
<el-table-column label="操作" width="120">
<template>
<el-button type="text" size="small">移除</el-button>
</template>
</el-table-column>
</el-table>
</template>
</el-table-column>
<el-table-column prop="applyNo" label="申请单号" width="132.2" />
<el-table-column prop="name" label="姓名" width="180" />
<el-table-column prop="address" label="地址" />
</el-table>
</template>
</el-table-column>
<el-table-column prop="applyNo" label="申请单号" width="180" />
<el-table-column prop="name" label="姓名" width="180" />
<el-table-column prop="address" label="地址" />
<el-table-column label="操作" width="120">
<template>
<el-button type="text" size="small">移除</el-button>
</template>
</el-table-column>
</el-table>
</div>
</template>
<script>
export default {
components: {
},
data() {
return {
tableHeight: 170,
tableLoading: false,
tableData: []
}
},
mounted() {
this.initData()
},
methods: {
initData() {
this.tableData = [
{
id: 1,
applyNo: '202004291234',
name: '张三',
address: '上海市普陀区金沙江路 1518 弄'
},
{
id: 2,
applyNo: '202004291235',
name: '李四',
address: '上海市普陀区金沙江路 1517 弄'
},
{
id: 3,
applyNo: '202004291236,202004291237',
name: '王五',
address: '上海市普陀区金沙江路 1519 弄',
datas: [
{
id: 31,
applyNo: '202004291236',
name: '王小五',
address: '上海市普陀区金沙江路 1519 弄',
datas: [
{
id: 31,
date: '2016-05-01',
type: '类型1',
status: '已发货'
},
{
id: 32,
date: '2016-05-01',
type: '类型2',
status: '未发货'
}
]
},
{
id: 32,
applyNo: '202004291237',
name: '赵小六',
address: '上海市普陀区金沙江路 1519 弄'
}
]
},
{
id: 4,
applyNo: '202004291238',
name: '赵六',
address: '上海市普陀区金沙江路 1516 弄'
}
]
},
arraySpanMethod({
row, column, rowIndex, columnIndex }) {
if (!row.datas) {
if (columnIndex === 0) {
return [0, 0]
} else if (columnIndex === 1) {
return [1, 2]
}
}
}
}
}
</script>
<style lang="scss" scoped>
.app-container {
::v-deep {
.el-table th {
background: #ddeeff;
}
.el-table__expanded-cell {
border-bottom: 0px;
border-right: 0px;
padding: 0px 0px 0px 47px;
}
}
.table-in-table {
border-top: 0px;
}
}
</style>
要点
使用
el-table的row-class-name方法配合css样式实现展开与折叠
方式二代码
<template>
<div class="app-container">
<el-table :data="tableData" :stripe="true" :header-cell-style="headerCellStyle" :cell-style="cellStyle" :row-class-name="rowClassName" border>
<el-table-column type="expand">
<template slot-scope="props">
<el-table :data="props.row.datas" :stripe="true" :header-cell-style="headerCellStyle" :cell-style="cellStyle" :row-class-name="rowClassName" border>
<el-table-column type="expand">
<template slot-scope="props2">
<el-table :data="props2.row.datas" :stripe="true" :header-cell-style="headerCellStyle" :cell-style="cellStyle" :row-class-name="rowClassName" border>
<el-table-column prop="date" label="下单日期" width="180" />
<el-table-column prop="type" label="单据类型" width="180" />
<el-table-column prop="status" label="状态" />
</el-table>
</template>
</el-table-column>
<el-table-column prop="applyNo" label="申请单号" width="132.2" />
<el-table-column prop="name" label="姓名" width="180" />
<el-table-column prop="address" label="地址" />
</el-table>
</template>
</el-table-column>
<el-table-column prop="applyNo" label="申请单号" width="180" />
<el-table-column prop="name" label="姓名" width="180" />
<el-table-column prop="address" label="地址" />
<el-table-column label="操作" width="120">
<template>
<el-button type="text" size="small">移除</el-button>
</template>
</el-table-column>
</el-table>
</div>
</template>
<script>
export default {
components: {
},
data() {
return {
tableHeight: 170,
tableLoading: false,
tableData: []
}
},
mounted() {
this.initData()
},
methods: {
initData() {
this.tableData = [
{
id: 1,
applyNo: '202004291234',
name: '张三',
address: '上海市普陀区金沙江路 1518 弄',
datas: []
},
{
id: 2,
applyNo: '202004291235',
name: '李四',
address: '上海市普陀区金沙江路 1517 弄',
datas: []
},
{
id: 3,
applyNo: '202004291236,202004291237',
name: '王五',
address: '上海市普陀区金沙江路 1519 弄',
datas: [
{
id: 31,
applyNo: '202004291236',
name: '王小五',
address: '上海市普陀区金沙江路 1519 弄',
datas: [
{
id: 31,
date: '2016-05-01',
type: '类型1',
status: '已发货'
},
{
id: 32,
date: '2016-05-01',
type: '类型2',
status: '未发货'
}
]
},
{
id: 32,
applyNo: '202004291237',
name: '赵小六',
address: '上海市普陀区金沙江路 1519 弄',
datas: []
}
]
},
{
id: 4,
applyNo: '202004291238',
name: '赵六',
address: '上海市普陀区金沙江路 1516 弄',
datas: []
}
]
},
// 设置表头样式
headerCellStyle({
row, column, rowIndex, columnIndex }) {
return {
textAlign: 'center', background: '#E6E6E6' }
},
// 设置表内容样式
cellStyle({
row, column, rowIndex, columnIndex }) {
return {
textAlign: 'center' }
},
// 设置row样式
rowClassName({
row, rowIndex }) {
console.log(JSON.stringify(row))
const data = row
const res = []
if (data.datas && data.datas.length > 0) {
res.push('row-expand-has')
return res
} else {
res.push('row-expand-unhas')
return res
}
}
}
}
</script>
<style lang="scss" scoped>
::v-deep {
.row-expand-unhas .el-table__expand-column {
pointer-events: none;
}
.row-expand-unhas .el-table__expand-column .el-icon {
visibility: hidden;
}
}
</style>