通过给el-table-column 设置 type="expand" 和 Scoped slot
可以开启展开行功能,el-table-column
的模板会被渲染成为展开行的内容
<el-table :data="gridData" ref="table">
<el-table-column type="expand" width="1">
<template slot-scope="scope">
<el-table :border="false" :data="sonTable">
<!-- 表格数据都是由两个数组对象组成的 -->
<el-table-column v-for="(tabSon, index) in sonTableText" :key="index" :prop="tabSon.prop" :label="tabSon.son">
</el-table-column>
</el-table>
</template>
</el-table-column>
<div v-for="(tab, index) in tableList" :key="index">
<el-table-column :label="tab.bianhao" :prop="tab.prop" >
<template slot-scope="scope">
<div v-if="tab.columnshow" @click="rowClick(scope.row)">
<span>{
{ scope.row[tab.prop] }}</span>
<span :class="scope.row.status?'ralate':'default'">↑</span>
</div>
<div v-else>
{
{scope.row[tab.prop]}}
</div>
</template>
</el-table-column>
</div>
</el-table>
这里封装了一个table表格组件,所以表格数据有点复杂
最外层展示的表格数据分别是 gridData 和 tableList
//表格的没一个行数据
gridData: [
{
id: "1717",
name: "新",
category: "DSDD202305301808120564373",
desc: "567.05",
address: "567.05",
shop: "支付宝",
shopId: "已付款",
chuan:'未传输',
time:'2023-04-21 11:26:06'
},]
//表格的表头
tableItem:[
{
bianhao:'编号',
prop:'id'
},
{
bianhao:'标志',
prop:'name'
},
{
bianhao:'订单应付金额',
columnshow:true,// 点击展开行的标识
prop:'address',
},
]
展开的表格数据就是sonTable 和 sonTableText
//内部表格的数据
sonTable:[
{
props1:'567.05',
props2:'586.2',
props3:'567.05',
props4:'567.05',
props5:'567.05',
props6:'567.05',
props7:'567.05',
props8:'567.05',
}
],
//表头数据
sonTableText:[
{
son:'订单总金额',
prop:'props1'
},
{
son:'配送费用',
prop:'props2'
},
{
son:'满减优惠',
prop:'props3'
},
{
son:'单品满减优惠',
prop:'props4'
},
]
设置点击某一个td元素展开下面的table表格数据最开始的就是需要先把 展开行的图标隐藏掉
目前实现方法:
给这个展开的el-table-column 设置宽度为1px 然后对图标进行隐藏
<el-table-column type="expand" width="1">
</el-table-column>
对图标进行隐藏
::v-deep .el-table__expand-column .cell{
display: none;
}
点击展开行最重要的方法就是table表格自带的一个api toggleRowExpansion 切换行扩展
还有就是给点击的那个td元素添加一个 标识( columnshow:true,),当这个标识为true的时候就触发这个 toggleRowExpansion 方法
给这个拥有标识的元素的数据 添加一个状态传递给 toggleRowExpansion 控制行的展开与隐藏
js
rowClick(row){
const index=this.gridData.findIndex(item=>item.id===row.id)
this.gridData[index].status=this.gridData[index].status?false:true
console.log('rowrowrowrowrowrowrowrowrowrowrowrowrowrowrowrowrow',row)
this.$refs.table.toggleRowExpansion(row,this.gridData[index].status)
}