<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- import CSS -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<link rel="stylesheet" href="./t.css">
</head>
<body>
<div id="app">
<template>
<el-dialog :visible.sync="dialogVisible" width="877px" height="542px" >
<el-row class="search">
<el-col >
<el-input clearable v-model="searchData" width="712px" prefix-icon="el-icon-search" @input="search" placeholder="组织名称"></el-input>
</el-col>
<!-- <el-col :span="2">
<el-button type="success" >搜索</el-button>
</el-col> -->
</el-row>
<el-row class="table">
<el-table :show-header='false' @row-click="rowClick" :data="list">
<el-table-column label="姓名" prop="name"></el-table-column>
</el-table>
</el-row>
<el-row class="pagination" type="flex">
<el-col :span="21">
<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
:current-page="page" :page-sizes="[1, 2, 5, 10]" :page-size="limit" background
layout=" prev, pager, next, jumper" :total="total" prev-text=" < " next-text="下一页 >">
</el-pagination>
</el-col>
<el-col :span="1" justify="end">
<el-button type="primary" @click="getList">确定</el-button>
</el-col>
</el-row>
</el-dialog>
</template>
</div>
</body>
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
new Vue({
el: '#app',
data() {
return {
list: [
{ name: 'cc', age: 14 },
{ name: 'ad', age: 15 },
{ name: 'eaae', age: 16 },
{ name: 'eaae', age: 16 },
{ name: 'faaf', age: 16 }
],
data: [],
limit: 10,
total: null,
page: 1,
searchData: "",
dialogVisible:false
}
},
created() {
this.dialogVisible = true
this.pageList()
},
methods: {
rowClick(val) {
console.log(val);
},
pageList() {
// 发请求拿到数据并暂存全部数据,方便之后操作
this.data = this.list
this.getList()
},
// 处理数据
getList() {
// es6过滤得到满足搜索条件的展示数据list
let list = this.data.filter((item, index) =>
item.name.includes(this.searchData)
)
this.list = list.filter((item, index) =>
index < this.page * this.limit && index >= this.limit * (this.page - 1)
)
this.total = list.length
},
// 当每页数量改变
handleSizeChange(val) {
console.log(`每页 ${val} 条`);
this.limit = val
this.getList()
},
// 当当前页改变
handleCurrentChange(val) {
console.log(`当前页: ${val}`);
this.page = val
this.getList()
},
// 搜索过滤数据
search() {
console.log('111');
this.page = 1
this.getList()
}
},
})
</script>
</html>
.el-dialog__wrapper {
.el-dialog {
background:url('./BG.png');
background-size: 100% 100%;
.el-dialog__header {
border: none;
.el-dialog__title {
color: #fff;
}
.el-dialog__headerbtn {
background-color: #3D7EFF;
width: 30px;
height: 30px;
border-radius: 50%;
.el-dialog__close {
color: #fff;
}
}
}
.el-dialog__body {
color: #fff;
.search {
margin-bottom: 20px;
.el-col {
.el-input {
.el-input__inner {
color: #3D7EFF;
background-color: transparent;
border-radius: 30px;
border: 1px solid #3D7EFF;
&::placeholder {
color: #3D7EFF;
}
}
.el-input__prefix {
color: #3D7EFF;
}
}
}
}
.table {
background: none;
.el-table{
background: none ;
tr {
background: none;
th {
border: none;
}
}
.el-table__body {
tbody {
color: #3D7EFF;
tr {
background: none;
&:hover td {
background-color: rgba(0,0,0,.2);
color: #fff;
}
}
th {
background: none;
}
.el-table__row {
td {
border: none;
}
}
}
}
}
}
.el-table__expanded-cell {
background: none ;
}
.el-table th, .el-table tr {
background-color: none;
}
}
.pagination {
margin-top: 20px;
.el-col {
.el-pagination {
button {
width: 46px;
height: 46px;
background-color: transparent;
border: 1px solid #3D7EFF;
color: #fff;
}
.btn-next {
width: 68px;
}
.el-pager {
li {
width: 46px;
height: 46px;
line-height: 46px;
font-size: 16px;
background-color: transparent;
border: 1px solid #3D7EFF;
color: #3D7EFF;
margin: 0 3px;
}
.active {
background-color: #3D7EFF;
color: #fff;
}
}
.el-pagination__jump {
margin-left: 5px;
height: 46px;
line-height: 46px;
font-size: 16px;
color: #fff;
.el-input {
.el-input__inner {
width: 48px;
height: 46px;
background-color: transparent;
border: 1px solid #3D7EFF;
color: #fff;
}
}
}
}
}
.el-col-1 {
.el-button {
margin-top: 3px;
width: 88px;
height: 46px;
// line-height: 46px;
background-color: transparent;
border: 1px solid #3D7EFF;
}
}
}
}
}
网友评论