element中的table表格点击某一个td展开新的一行

通过给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 控制行的展开与隐藏

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

element中的table表格点击某一个td展开新的一行

猜你喜欢