Click on a td in the table in element to expand a new row

By setting type="expand" to el-table-column and  Scoped slot enabling the expand row function, el-table-column the template will be rendered as the content of the expanded row

 <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>

A table component is encapsulated here, so the table data is a bit complicated.

The outermost table data displayed are gridData and tableList respectively. 

 //表格的没一个行数据
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',
                },
            ]

The expanded table data is sonTable and 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'
                },
                ]

To set up clicking on a certain td element to expand the table data below, you first need to hide the icon of the expanded row.

 Current implementation method:

Set the width of this expanded el-table-column to 1px and hide the icon

<el-table-column type="expand" width="1">
        
 </el-table-column>

对图标进行隐藏
::v-deep .el-table__expand-column .cell{
  display: none;
}

The most important way to click to expand a row is        to toggle row expansion, an API that comes with the table table.

There is also a label (columnshow:true,) added to the clicked td element. When the label is true, the toggleRowExpansion method is triggered. 

 

Add a state to the data of the identified element and pass it to toggleRowExpansion to control the expansion and hiding of rows

 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)
    }