75 lines
2.7 KiB
Vue
75 lines
2.7 KiB
Vue
<template>
|
|
<div>
|
|
<el-form :inline="true">
|
|
<el-form-item label="登录账号">
|
|
<el-input v-model="migrationObj.bookName" placeholder="手机号/邮箱" clearable></el-input>
|
|
</el-form-item>
|
|
<el-form-item>
|
|
<el-button type="primary">查询</el-button>
|
|
</el-form-item>
|
|
</el-form>
|
|
<el-table :data="tableData" border style="width: 100%">
|
|
<el-table-column prop="date" label="日期">
|
|
</el-table-column>
|
|
<el-table-column prop="name" label="姓名">
|
|
</el-table-column>
|
|
<el-table-column fixed="right" label="操作" width="100">
|
|
<template slot-scope="scope">
|
|
<el-button @click="handleClick()" type="text" size="small">详情</el-button>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
<el-pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" :current-page="pageIndex"
|
|
:page-sizes="[10, 20, 50, 100]" :page-size="pageSize" :total="tableData.length"
|
|
layout="total, sizes, prev, pager, next, jumper">
|
|
</el-pagination>
|
|
<el-dialog title="详细信息" :visible.sync="migrationState">
|
|
<el-descriptions border>
|
|
<el-descriptions-item label="用户名">kooriookami</el-descriptions-item>
|
|
<el-descriptions-item label="手机号">18100000000</el-descriptions-item>
|
|
<el-descriptions-item label="居住地">苏州市</el-descriptions-item>
|
|
<el-descriptions-item label="联系地址">江苏省苏州市吴中区吴中大道 1188 号</el-descriptions-item>
|
|
</el-descriptions>
|
|
<span slot="footer" class="dialog-footer">
|
|
|
|
<el-button type="primary" @click="migrationState = false">取消</el-button>
|
|
</span>
|
|
</el-dialog>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
tableData: [{
|
|
date: '2016-05-02',
|
|
name: '王小虎'
|
|
}],
|
|
migrationObj: {
|
|
bookName: ''
|
|
},
|
|
pageSize: 10,
|
|
pageIndex: 1,
|
|
migrationState: false
|
|
}
|
|
},
|
|
methods: {
|
|
handleClick() {
|
|
this.migrationState = true
|
|
},
|
|
|
|
// 每页数
|
|
sizeChangeHandle(val) {
|
|
this.pageSize = val;
|
|
this.pageIndex = 1;
|
|
this.getDataList();
|
|
},
|
|
// 当前页
|
|
currentChangeHandle(val) {
|
|
this.pageIndex = val;
|
|
this.getDataList();
|
|
},
|
|
}
|
|
}
|
|
</script> |