表格中再展开一个表格

鲤斌 / 2023-09-04 / 原文

<template>
  <el-table ref="table" border stripe highlight-current-row :data="tableData5" style="width: 800px;">
      <el-table-column label="商品 ID" prop="id" width="100">
      </el-table-column>
      <el-table-column label="商品名称" prop="name">
      </el-table-column>
      <el-table-column label="描述" prop="desc">
      </el-table-column>
      <el-table-column label="操作" width="100">
          <template slot-scope="scope">
              <el-button type="text" @click="toogleExpand(scope.row)">查看详情</el-button>
          </template>
      </el-table-column>
      <el-table-column type="expand" width="1">
          <template>

              <el-table
        :data="tableData"
        style="width: 100%"
        :row-class-name="tableRowClassName"
      
      >

        <el-table-column prop="id" label="ID"> </el-table-column>
        <el-table-column prop="name" label="姓名"> </el-table-column>
      </el-table>
          </template>
      </el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
      return {
          tableData5: [
              {
                  id: '1',
                  name: '好滋好味鸡蛋仔1',
                  desc: '荷兰优质淡奶，奶香浓而不腻1',
                  age: 11,
              },
              {
                  id: '2',
                  name: '好滋好味鸡蛋仔2',
                  desc: '荷兰优质淡奶，奶香浓而不腻2',
                  age: 11,
              },
              {
                  id: '3',
                  name: '好滋好味鸡蛋仔3',
                  desc: '荷兰优质淡奶，奶香浓而不腻3',
                  age: 11,
              },
              {
                  id: '4',
                  name: '好滋好味鸡蛋仔4',
                  desc: '荷兰优质淡奶，奶香浓而不腻4',
                  age: 11,
              },
          ],
          tableData: [
        {
                "id": 1,
                "phone": "搜索",
                "userTime": "",
                "vipTime": "",
                "portraits": "",
                "name": "问问",
                "rolesName": "",
                "passID":0
            }
        ],
      };
  },
  methods: {
      toogleExpand(row) {
          const $table = this.$refs.table;
          this.tableData5.forEach(item => {
              if (row.id !== item.id) {
                  $table.toggleRowExpansion(item, false);
              }
          });
          $table.toggleRowExpansion(row);
      },
  },
};
</script>