要素内のテーブル内の td をクリックして、新しい行を展開します

type="expand" を el-table-column に設定し、 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>

ここではテーブルコンポーネントがカプセル化されているため、テーブルデータは少し複雑です。

表示される最も外側のテーブルデータは、それぞれ 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 要素をクリックして以下のテーブルデータを展開するように設定するには、まず展開された行のアイコンを非表示にする必要があります。

現在の実装方法:

この展開された 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 である行の展開を切り替えることです。

クリックされた 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)
    }

要素内のテーブル内の td をクリックして、新しい行を展開します

おすすめ