Vue
一、main.js
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import layer from 'vue-layer'
import axios from 'axios'
import VueAxios from 'vue-axios'
Vue.prototype.$layer = layer(Vue);
Vue.prototype.$axios = axios
Vue.use(ElementUI)
Vue.use(VueAxios, axios)
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
二、页面
<template>
<div>
<el-form class="search" border="1">
<el-col :span="8">
<el-input v-model="key" placeholder="客户名称 中文名 英文名 电话 邮箱"></el-input>
</el-col>
<el-col :span="1" style="margin-left: 10px;">
<el-button type="primary" @click="search">查询</el-button>
</el-col>
<el-col :span="2" style="margin-left: 10px;">
<el-button type="primary">新增</el-button>
</el-col>
<el-col :span="6" style="text-align: left;">
<el-form-item label="VIP状态">
<el-select v-model="vipStatus" @change="search" placeholder="请选择" style="text-align: left;">
<el-option label="全部" value="全部"></el-option>
<el-option label="游客" value="游客"></el-option>
<el-option label="注册用户" value="注册用户"></el-option>
<el-option label="VIP用户" value="VIP用户"></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="1" style="padding-top:10px;text-align: left;">
<el-checkbox-group v-model="isShow" @change="search">
<el-checkbox label="只显示有效" name="effect"></el-checkbox>
</el-checkbox-group>
</el-col>
<el-col :span="5"></el-col>
</el-form>
<el-table :data="userList" style="width: 100%" scope="scope" :default-sort = "{prop: 'date', order: 'descending'}">
<el-table-column prop="rn" label="序号" width="50"></el-table-column>
<el-table-column prop="customerName" label="客户" width="250" sortable></el-table-column>
<el-table-column prop="name" label="姓名" width="80" sortable>
<template slot-scope="scope">
<el-button type="text" size="small" @click="detail(scope.row,scope.index)">{{scope.row.name}}</el-button>
</template>
</el-table-column>
<el-table-column prop="dept" label="部门" width="90" sortable></el-table-column>
<el-table-column prop="title" label="岗位" width="90" sortable></el-table-column>
<el-table-column prop="status" label="状态" width="80" sortable></el-table-column>
<el-table-column prop="lastLoginTime" label="最后使用" width="100" sortable></el-table-column>
<el-table-column prop="lastServerTime" label="最后服务" width="100" sortable></el-table-column>
<el-table-column prop="mail" label="邮箱" width="150"></el-table-column>
<el-table-column prop="phone" label="手机" width="150"></el-table-column>
<el-table-column prop="isKey" label="是否有效" sortable>
</el-table-column>
</el-table>
<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
:page-sizes="[5, 10, 20, 40]" :page-size="pagesize" :total="totalCount">
</el-pagination>
<el-dialog title="详细信息" :visible.sync="dialogVisible" width="40%" :before-close="handleClose">
<el-form ref="form" :model="form" label-width="10px">
<el-form-item>
<el-col :span="20">
<el-input v-model="form.name" width="90%"></el-input>
</el-col>
<el-col :span="4">
<el-button type="primary" width="90%">...</el-button>
</el-col>
</el-form-item>
<el-form-item>
<el-col :span="12">
<el-input v-model="form.name" width="40%"></el-input>
</el-col>
<el-col :span="1">
<el-button type="text" width="20%"></el-button>
</el-col>
<el-col :span="11">
<el-input v-model="form.name" width="40%"></el-input>
</el-col>
</el-form-item>
<el-form-item>
<el-col :span="8">
<el-radio v-model="radio" label="1">先生</el-radio>
<el-radio v-model="radio" label="2">女士</el-radio>
</el-col>
<el-col :span="16">
</el-col>
</el-form-item>
<el-form-item>
<el-col :span="16">
<el-input v-model="form.name" style="width:99%"></el-input>
</el-col>
<el-col :span="8">
<el-select v-model="form.region" style="width:95%">
<el-option label="区域一" value="shanghai"></el-option>
<el-option label="区域二" value="beijing"></el-option>
</el-select>
</el-col>
</el-form-item>
<el-form-item>
<el-col :span="16">
<el-input v-model="form.name" style="width:99%"></el-input>
</el-col>
<el-col :span="8">
<el-select v-model="form.region" style="width:95%">
<el-option label="区域一" value="shanghai"></el-option>
<el-option label="区域二" value="beijing"></el-option>
</el-select>
</el-col>
</el-form-item>
<el-form-item>
<el-col :span="18">
<el-input v-model="form.name" width="95%"></el-input>
</el-col>
<el-col :span="6">
<el-button type="primary" style="text-align: left">+</el-button>
<el-button type="primary" style="text-align: left">-</el-button>
</el-col>
</el-form-item>
<el-form-item>
<el-col :span="18">
<el-input v-model="form.name" width="95%"></el-input>
</el-col>
<el-col :span="6">
<el-button type="primary" style="text-align: left">+</el-button>
<el-button type="primary" style="text-align: left">-</el-button>
</el-col>
</el-form-item>
<el-form-item>
<el-col :span="18">
<el-input v-model="form.name" width="95%"></el-input>
</el-col>
<el-col :span="6">
<el-button type="primary" style="text-align: left">+</el-button>
<el-button type="primary" style="text-align: left">-</el-button>
</el-col>
</el-form-item>
<el-form-item>
<el-col :span="18">
<el-input v-model="form.name" width="95%"></el-input>
</el-col>
<el-col :span="6">
<el-button type="primary" style="text-align: left">...</el-button>
</el-col>
</el-form-item>
<el-form-item>
<el-col :span="8">
<el-radio v-model="radio" label="1">先生</el-radio>
<el-radio v-model="radio" label="2">女士</el-radio>
</el-col>
<el-col :span="16">
</el-col>
</el-form-item>
<el-form-item>
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="dialogVisible = false">确 定</el-button>
</el-form-item>
</el-form>
</el-dialog>
</div>
</template>
<style>
.el-form-item {
margin-bottom: 10px;
}
.el-dialog__header {
padding: 10px 10px 10px;
}
.el-dialog__header {
padding: 10px 10px 10px;
text-align:left;
}
.el-dialog__body {
padding: 10px 20px;
color: #606266;
font-size: 14px;
}
.el-form-item__content {
line-height: 20px;
position: relative;
font-size: 14px;
}
</style>
<script>
export default {
data() {
return {
currentPage: 1, //初始页
pagesize: 10,
totalCount: 100,
userList: [],
key: '',
vipStatus: '',
isShow: false,
dialogVisible: false,
form: {
name: '111'
},
radio:'1'
}
},
methods: {
// 初始页currentPage、初始每页数据数pagesize和数据data
handleSizeChange: function(size) {
this.pagesize = size;
console.log(this.pagesize) //每页下拉显示数据
this.handleUserList()
},
handleCurrentChange: function(currentPage) {
this.currentPage = currentPage;
console.log(this.currentPage) //点击第几页
this.handleUserList()
},
handleUserList() {
console.log("isShow======" + this.isShow);
var url = 'http://localhost:8080/test-demo/contact/list'
var params = {
page: this.currentPage,
pagesize: this.pagesize,
key: this.key
}
this.$axios.get(url, {
params: params
})
.then(res => {
this.userList = res.data;
})
.catch(function(error) {
console.log(error);
});
},
detail(row, index) {
this.dialogVisible = true;
},
search() {
this.currentPage = 1;
this.handleUserList()
},
handleClose(done) {
this.dialogVisible = false;
}
},
mounted: function() {
this.$nextTick(function() {
this.handleUserList()
})
}
}
</script>
三、router index.js
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import clist from '@/components/ContactList'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'clist',
component: clist
}
]
})
