数组套数组 获取数据

<template>

  <div>

    <el-row style="margin:20px;">

      <el-button type="success" @click="add">新增</el-button>

      <el-button type="success" style="margin:20px;">删除</el-button>

    </el-row>

    <el-table

      ref="multipleTable"

      :data="tableData"

      tooltip-effect="dark"

      style="width: 100%"

      @selection-change="handleSelectionChange"

    >

      <el-table-column type="selection" width="55"></el-table-column>

      <el-table-column prop="id" label="ID" width="120"></el-table-column>

      <el-table-column prop="class1" label="一级类目" width="320"></el-table-column>

      <el-table-column prop="name" label="二级内目" width="320">

        <template slot-scope="scope">{{class2List(scope.row)}}</template>

      </el-table-column>

      <el-table-column prop="modifyName" label="编辑者" width="120"></el-table-column>

      <el-table-column fixed="right" label="操作" align="center">

        <template slot-scope="scope">

          <el-button

            @click="handleClick(scope.row)"

            type="text"

            size="small"

          >删除&nbsp;&nbsp;&nbsp;&nbsp;|</el-button>

          <el-button type="text" size="small">编辑</el-button>

        </template>

      </el-table-column>

    </el-table>

    <el-pagination

      @size-change="handleSizeChange"

      @current-change="handleCurrentChange"

      :current-page.sync="currentPage"

      :page-size="pageParams.size"

      layout="total, prev, pager, next"

      :total="pageParams.totalCount"

    ></el-pagination>

    <el-dialog title="新增类别" :visible.sync="dialogFormVisible">

      <el-form :model="form">

        <el-form-item label="类别名称">

          <el-input v-model="form.name"></el-input>

        </el-form-item>

      </el-form>

      <div slot="footer" class="dialog-footer">

        <el-button type="primary" @click="submit">提 交</el-button>

        <el-button @click="dialogFormVisible = false">取 消</el-button>

      </div>

    </el-dialog>

  </div>

</template>

<script>

import request from "@/utils/request";

import page from "@/utils/page";

export default {

  name: "knowtype",

  mixins: [page],

  data() {

    return {

      dialogFormVisible: false,

      tableData: [],

      multipleSelection: [],

      form: {

        name: ""

      }

    };

  },

  mounted() {

    this.gettableData();

  },

  methods: {

    handleSelectionChange(val) {

      this.multipleSelection = val;

    },

    //获取数据

    gettableData() {

      // 数据列表

      let page = this.currentPage - 1;

      let size = 20;

      request

        .get("/manager/know?page=" + page + "&size=" + size)

        .then(res => {

          if (res.code == 20000) {

            // console.log(res.data.list)

            this.tableData = res.data.list;

            this.setPage(res.data);

          }

        })

        .catch(err => {

          console.log(err);

        });

    },

    //新增弹框

    add() {

      this.dialogFormVisible = true;

    },

    //新增确定

    submit() {

      this.dialogFormVisible = false;

      let param = {

        pname: this.form.name

      };

      request

        .post("/manager/dict", param)

        .then(res => {

          if (res.code == 20000) {

            this.$message("新增成功");

            this.gettableData();

          }

        })

        .catch(err => {

          console.log(err);

        });

    },

    class2List(row) {

      let name = "";

      row.class2.forEach(v => {

        name += v.name + "、";

      });

      // console.log(name);

      return name;

      // return row.class2

      // console.log(row)

    }

  }

};

</script>

<style>

</style>