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>
  • 相关阅读:
    将图片部署在tomcat/iportWork/uploadFiles中
    idea中的svn配置
    mavan和idea的搭建,很好的一篇文章
    C#如何遍历数组?
    java 泛型小小的测试题
    js关于变量作为if条件的真假问题
    HTML5实现两个视频循环播放!
    JQuery利用选择器定位动态id?
    hibernate QBC查询
    mybatis前台传来一个String,后后台执行sql变成了true
  • 原文地址:https://www.cnblogs.com/ylblogs/p/12022268.html
Copyright © 2011-2022 走看看