Haga clic en un td en la tabla del elemento para expandir una nueva fila

Al configurar type="expand" en el-table-column y  Scoped slot habilitar la función de expandir fila, el-table-column la plantilla se representará como el contenido de la fila expandida.

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

Aquí se encapsula un componente de la tabla, por lo que los datos de la tabla son un poco complicados.

Los datos de la tabla más externa que se muestran son gridData y tableList respectivamente. 

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

Los datos de la tabla expandida son sonTable y 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'
                },
                ]

Para configurar hacer clic en un determinado elemento td para expandir los datos de la tabla a continuación, primero debe ocultar el icono de la fila expandida.

 Método de implementación actual:

Establezca el ancho de esta columna el-table-columna expandida en 1px y oculte el ícono

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

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

La forma más importante de hacer clic para expandir una fila es        alternar la expansión de filas , una API que viene con la tabla.

También hay una etiqueta (columnshow:true) agregada al elemento td en el que se hizo clic. Cuando la etiqueta es verdadera, se activa el método toggleRowExpansion. 

 

Agregue un estado a los datos del elemento identificado y páselo a toggleRowExpansion para controlar la expansión y ocultación de filas.

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