el-table表格展開行

效果：

代碼：

                <el-table :data="tableData" border style="width: 100%">
                  >
                  <el-table-column prop="auditRuleId" label="NO" width="180"></el-table-column>
                  <!-- <el-table-column prop="ruleType" label="Type" width="180"></el-table-column> -->
                  <el-table-column prop="auditDesc" label="Description and Detail">
                    <el-table-column prop="auditStatus" label="Type" width="80"></el-table-column>
                    <el-table-column prop="auditDesc" label="Amount" width="280"></el-table-column>
                    <el-table-column prop="auditDesc" label="Detail"></el-table-column>
                    <el-table-column type="expand" label="Open" width="80">
                      <template slot-scope="props">
                        <div>{{props.row.auditDesc}}</div>
                      </template>
                    </el-table-column>
                  </el-table-column>
                  <el-table-column prop="auditStatus" label="Status" width="180"></el-table-column>
                  <el-table-column prop="auditStatus" label="Menu" width="180">
                    <template slot-scope="scope">
                      <div style="text-align:center;">
                        <el-button
                          class="CURSOR"
                          style="width:90px"
                          @click="handelClickView(scope.row)"
                          type="primary"
                        >View</el-button>
                      </div>
                    </template>
                  </el-table-column>
                </el-table>

 

    tableData: [
        {
          auditRuleId: "1",
          auditDesc: "上海市普陀區金沙江路 1518 弄",
          auditStatus: 11,
          id: 1
        },
        {
          auditRuleId: "2",
          auditDesc: "上海市普陀區金沙江路 1518 弄",
          auditStatus: 11,
          id: 2
        },
        {
          auditRuleId: "4",
          auditDesc: "上海市普陀區金沙江路 1518 弄",
          auditStatus: 11,
          id: 3
        },
        {
          auditRuleId: "5",
          auditDesc: "上海市普陀區金沙江路 1518 弄",
          auditStatus: 11,
          id: 4
        }
      ],

僅供參考~~~