vue+element-ui实现表格里嵌套表格

 

效果图：点击某行数据展开另一个嵌套在里面的table

核心代码：

从后台请求的数据格式：

代码实现：

<template>
  <div>
    <div class="assetnum">
      <div class="assetbox br pr30">
        <div class="assettitle">
          <span>
            已发现资产（数量：
            <strong>{{tableData2.length}}</strong>）
          </span>
        </div>
        <div class="mytable">
          <el-table ref="table2" :data="tableData2" style="width: 100%">
            <el-table-column width="50">
              <template slot-scope="scope">
                <i class="iconfont icon-tubiaozhizuomoban" @click="toogleExpand2(scope.row)"></i>
              </template>
            </el-table-column>
            <el-table-column class="sectable" prop="items" type="expand" width="1">
              <template slot-scope="scope">
                <el-table :data="scope.row.items" stripe style="width: 100%">
                  <el-table-column type="index"></el-table-column>
                  <el-table-column prop="port" label="端口"></el-table-column>
                  <el-table-column prop="protocol" label="协议"></el-table-column>
                  <el-table-column prop="service" label="服务"></el-table-column>
                  <el-table-column prop="software" label="软件"></el-table-column>
                </el-table>
              </template>
            </el-table-column>
            <el-table-column label="IP" prop="ip">
              <template slot-scope="scope">
                <span class="ipbtn">IP</span>
                {{scope.row.ip}}
              </template>
            </el-table-column>
            <el-table-column label="资产类型" prop="catagory">
              <template slot-scope="scope">
                <span v-if="scope.row.catagory=='host'">
                  <i class="iconfont icon-zhuji1"></i>
                </span>
                <span v-if="scope.row.catagory=='db'">
                  <i class="iconfont icon-weibiaoti-database"></i>
                </span>
                {{scope.row.catagory}}
              </template>
            </el-table-column>
            <el-table-column label="标准系统" prop="type">
              <template slot-scope="scope">
                <span v-if="scope.row.type=='windows'">
                  <img src="../../../../assets/img/windows.png" alt />
                </span>
                <span v-if="scope.row.type=='RedHat'">
                  <img src="../../../../assets/img/redhat.png" alt />
                </span>
                <span v-if="scope.row.type=='mysql'">
                  <img src="../../../../assets/img/Oracle.png" alt />
                </span>
                <span v-if="scope.row.type=='CentOS'">
                  <img src="../../../../assets/img/centos.png" alt />
                </span>
                {{scope.row.type}}
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <div class="assetbox pl30">
        <div class="assettitle">
          <span>
            不存活资产（数量：
            <strong>{{tableData3.length}}</strong>）
          </span>
        </div>
        <div class="mytable">
          <el-table ref="table" :data="tableData3" style="width: 100%">
            <el-table-column width="50">
              <template slot-scope="scope">
                <i class="iconfont icon-tubiaozhizuomoban" @click="toogleExpand(scope.row)"></i>
              </template>
            </el-table-column>
            <el-table-column class="sectable" type="expand" width="1">
              <template>
                <el-table :data="tableData3.items" stripe style="width: 100%">
                  <el-table-column type="index"></el-table-column>
                  <el-table-column prop="port" label="端口"></el-table-column>
                  <el-table-column prop="xy" label="协议"></el-table-column>
                  <el-table-column prop="server" label="服务"></el-table-column>
                  <el-table-column prop="software" label="软件"></el-table-column>
                </el-table>
              </template>
            </el-table-column>
            <el-table-column label="IP" prop="ip">
              <template slot-scope="scope">
                <span class="ipbtn">IP</span>
                {{scope.row.ip}}
              </template>
            </el-table-column>
            <el-table-column label="资产类型" prop="catagory">
              <template slot-scope="scope">
                <span v-if="scope.row.catagory=='host'">
                  <i class="iconfont icon-zhuji1"></i>
                </span>
                <span v-if="scope.row.catagory=='db'">
                  <i class="iconfont icon-weibiaoti-database"></i>
                </span>
                {{scope.row.catagory}}
              </template>
            </el-table-column>
            <el-table-column label="标准系统" prop="type">
              <template slot-scope="scope">
                <span v-if="scope.row.type=='windows'">
                  <img src="../../../../assets/img/windows.png" alt />
                </span>
                <span v-if="scope.row.type=='RedHat'">
                  <img src="../../../../assets/img/redhat.png" alt />
                </span>
                <span v-if="scope.row.type=='Oracle'">
                  <img src="../../../../assets/img/Oracle.png" alt />
                </span>
                <span v-if="scope.row.type=='CentOS'">
                  <img src="../../../../assets/img/centos.png" alt />
                </span>
                {{scope.row.type}}
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <div></div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      value2: [],
      value3: [],
      tableData2: [],
      tableData3: [],
    };
  },
  activated() {
    this.getDataList();
  },
  methods: {
    toogleExpand(row) {
      let $table = this.$refs.table;
      $table.toggleRowExpansion(row);
    },
    toogleExpand2(row) {
      let $table = this.$refs.table2;
      $table.toggleRowExpansion(row);
      console.log(this.$route.params.taskId)
    },
    getDataList(){
      //获取上一层页面点击要查看的任务ID
      var ids = this.$route.params.taskId;
      //发送请求给后台
      this.$http({
        url: this.$http.adornUrl("/ads/task/detail"),
        method: "get",
        params: this.$http.adornParams({
          taskId: ids
        })
      }).then(({ data }) => {

        if (data && data.code === 0) {
          let arr1 = data.data;
          let hadData = [];
          let noData = [];
          //对获取的数据利用status判断进行分类，再放进两个不同的数组中
          arr1.map(function(item,index){
            if(item.status == 1){
              hadData.push(item)
            }else{
              noData.push(item)
            }
          })
          //赋值给已发现资产
            this.tableData2 = hadData ;
          //赋值给不存活资产
            this.tableData3 = noData ;
            console.log(this.tableData2)
        } else {
        }
      });
    }
  }
};
</script>