zoukankan      html  css  js  c++  java
  • 数组套数组 获取数据

    <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=" 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>
  • 相关阅读:
    Android Media Playback 中的MediaPlayer的用法及注意事项(二)
    Android Media Playback 中的MediaPlayer的用法及注意事项(一)
    34. Search for a Range
    33. Search in Rotated Sorted Array
    32. Longest Valid Parentheses
    31. Next Permutation下一个排列
    30. Substring with Concatenation of All Words找出串联所有词的子串
    29. Divide Two Integers
    28. Implement strStr()子串匹配
    27. Remove Element
  • 原文地址:https://www.cnblogs.com/ylblogs/p/12022268.html
Copyright © 2011-2022 走看看