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>
<p>Stats</p>
</div>
<div class="set">
<span class="el-icon-info"></span>
<p>5 Notifications</p>
<span class="el-icon-caret-bottom"></span>
</div>
<div class="set">
<span class="el-icon-setting"></span>
<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值
