美文网首页
2019-08-12 vue get post请求 搜索

2019-08-12 vue get post请求 搜索

作者: X秀秀 | 来源:发表于2019-08-12 15:17 被阅读0次

post  请求

get 请求

类型

搜索

<template>

    <div>

        <div class="s">

            <div class="st">

                <p>Update The Product</p>

            </div>

            <div class="ss">

                <div class="set">

                    <span class="el-icon-rank"></span>&nbsp;

                    <p>Stats</p>

                </div>

                <div class="set">

                    <span class="el-icon-info"></span>&nbsp;

                    <p>5 Notifications</p>&nbsp;

                    <span class="el-icon-caret-bottom"></span>

                </div>

                <div class="set">

                    <span class="el-icon-setting"></span>&nbsp;

                    <p>Setting</p>

                </div>

            </div>

        </div>

        <div class="search">

            <el-input placeholder="Code" v-model="myInput"></el-input>

            <span class="el-icon-search" @click="search"></span>

        </div>

        <el-table :data="tableDate" stripe style="width: 100%;">

            <el-table-column prop="cardmoney" label="brand" width="80px"></el-table-column>

            <el-table-column prop="stonemoney" label="size" width="110px;"></el-table-column>

            <el-table-column prop="openid" label="pattern" width="110px;"></el-table-column>

            <el-table-column prop="cardmoney" label="ply"></el-table-column>

            <el-table-column prop="name" label="speed"></el-table-column>

            <el-table-column prop="loginintime" label="price"></el-table-column>

            <el-table-column prop="mongodbid" label="qty"></el-table-column>

            <el-table-column prop="noplayer" label="position"></el-table-column>

            <el-table-column prop="nosaytime" label="rim"></el-table-column>

            <el-table-column prop="playertype" label="aval"></el-table-column>

            <el-table-column prop="stonemoney" label="code"></el-table-column>

            <el-table-column label="Update">

                <template slot-scope="scope">

                    <el-button type="primary" @click="handleEdit(scope.$index, scope.row)">Update</el-button>

                </template>

            </el-table-column>

        </el-table>

        <!--

            data  显示的数据 array

            stripe  是否为斑马纹 table  boolean — false

            label 显示的标题 string

            prop  对应列内容的字段名，也可以使用 property 属性 string

            //.slice((page-1)*row,page*row)

        -->

        <el-pagination

            @size-change="handleSizeChange"

            @current-change="handleCurrentChange"

            background=""

            :page-sizes="[5,10,20]"

            layout="total,sizes,prev, pager, next,jumper"

            align="center"

            :total="this.total"

        ></el-pagination>

        <!--

        v-bind 缩写@

        v-on 缩写:

        size-change row改变时会触发 每页条数

        current-change  page 改变时会触发 当前页

        background  是否为分页按钮添加背景色  Boolean — false

        current-page  当前页数，支持 .sync 修饰符 Number  — 1

        page-sizes  每页显示个数选择器的选项设置  Number[]  — [10, 20, 30, 40, 50, 100]

        layout  组件布局，子组件名用逗号分隔

        total 总条目数  Number

        -->

        <box v-if="flag" :dates="date" :msg="flag" v-on:set="get"></box>

    </div>

</template>

<script>

import box from "./box";

import axios from "axios";

export default {

  components: {

    box

  },

  data() {

    return {

      arr: [],

      page: 3, //当前页

      row: 5, //每页几条数据

      myInput: "",

      flag: false,

      tableDate: [],

      total: 0

    };

  },

  mounted() {

    this.pageList(this.page, this.row);

  },

  methods: {

    pageList(page, row) {

      var _this = this;

      _this.$axios

        .get(_this.globalAPI.user_list, {

          params: ({

            page: page,

            row: row

          })

        })

        .then(res => {

          console.log(res,'iiiii');

          _this.tableDate = _this.arr = res.data.rows;

          _this.total = res.data.total;

        })

        .catch(err => {

          console.log(err);

        });

    },

    handleSizeChange: function(size) {

      this.row = size;

    },

    handleCurrentChange: function(page) {

      this.page = page;

      this.pageList(page, this.row);

    },

    handleEdit: function(index, row) {

      console.log(index, row);

      this.date = row;

      this.flag = true;

    },

    get(data) {

      this.flag = false;

    },

    search() {

      var brr = [];

      for (var i = 0; i < this.arr.length; i++) {

        if (this.arr[i].name.search(this.myInput) != -1) {

          brr.push(this.arr[i]);

        }

      }

      console.log(brr);

      this.tableDate = brr

      this.total = brr.length

    // return brr;

    }

  },

  //生命周期钩子函数-->创建

  //  created() {

  //    this.$axios

  //      .get("http://47.92.206.41/longchuan/player/queryInfos")

  //      .then(res => {

  //        console.log(res);

  //        this.arr = res.data.rows;

  //      })

  //      .catch(err => {

  //        console.log(err);

  //      });

  //  },

//  computed: {

//    //  搜索

//    list: function() {

//      var brr = [];

//      for (var i = 0; i < this.arr.length; i++) {

//        if (this.arr[i].name.search(this.myInput) != -1) {

//          brr.push(this.arr[i]);

//        }

//      }

//      console.log(brr);

//      return brr;

//    }

//  }

};

</script>

<style scoped>

.s {

  color: #9a9a9a;

  width: 100%;

  height: 60px;

  display: flex;

  justify-content: space-between;

  align-items: center;

  border-bottom: 1px solid #dddddd;

}

.st {

  margin-left: 3%;

  color: #777777;

  font-size: 20px;

  font-weight: bold;

}

.ss {

  width: 34%;

  display: flex;

}

.set {

  display: flex;

  align-items: center;

  justify-content: flex-end;

  margin-right: 20px;

}

.el-table {

  box-sizing: border-box;

  display: flex;

  flex-direction: column;

}

.search {

  width: 100%;

  display: flex;

  justify-content: flex-end;

  align-items: center;

  padding: 20px 0;

  padding-right: 30px;

  box-sizing: border-box;

  background: white;

}

.search .el-input {

  width: 15%;

  margin-right: 20px;

}

.el-icon-search {

  cursor: pointer;

}

</style>

传送多个以逗号形式发送给后台id

  <el-table-column

          align="center"  prop="time"

          label="获胜时间"  width="255"

          :formatter="timestampToTime"

        ></el-table-column>

  // 时间戳转换成时间

    // 使用element table组件中的formatter属性，传入一个函数

    timestampToTime(row, column) {

      var date = new Date(row.time); //时间戳为10位需*1000，时间戳为13位的话不需乘1000

      var Y = date.getFullYear() + "-";

      var M =

        (date.getMonth() + 1 < 10

          ? "0" + (date.getMonth() + 1)

          : date.getMonth() + 1) + "-";

      var D = date.getDate() + " ";

      var h = date.getHours() + ":";

      var m = date.getMinutes() + ":";

      var s = date.getSeconds();

      return Y + M + D + h + m + s;

    },

在el-option里赋值

https://blog.csdn.net/xuxinwen32/article/details/88319515

vue  el-select获取label和value值

相关文章