(文章目录)
前言
这个项目是拿来练手的项目，基于VUE+Element UI，并没有做后端，所以用的是纯前端的解决方案（有更好的办法欢迎提出），主要实现的是对列表数据的查询，筛选，修改这些常用功能。
实现效果
筛选
查询
修改
增加
代码实现
HTML
<!-- 用户管理 -->
<template>
<div class="User" style="margin-right: 18px;">
<div class="Management" v-if="IsManagement">
<!-- 查询 -->
<div class="screeningUser">
<el-row :gutter="20">
<el-col :span="18">
<div class="grid-content bg-purple">
<el-row :gutter="20">
<el-col :span="6">
<div class="grid-content bg-purple">
<el-input v-model="query.UserIdValue" placeholder="请输入ID" style="width:80%"></el-input>
</div>
</el-col>
<el-col :span="6">
<div class="grid-content bg-purple">
<el-select v-model="query.UserNameValue" filterable placeholder="请输入用户姓名">
<el-option
v-for="item in UserName"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</div>
</el-col>
<el-col :span="6">
<div class="grid-content bg-purple">
<el-select v-model="query.UserItemValue" filterable placeholder="请输入团队">
<el-option
v-for="item in UserItem"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</div>
</el-col>
<el-col :span="6">
<div class="grid-content bg-purple">
<el-select v-model="query.UserPostionValue" filterable placeholder="请输入职位">
<el-option
v-for="item in UserPostion"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</div>
</el-col>
</el-row>
</div>
</el-col>
<el-col :span="6">
<div class="grid-content bg-purple">
<el-button type="primary" @click="isaddDatadialog" plain>增加</el-button>
<el-button type="primary" @click="queryData" plain>查询</el-button>
<el-button type="primary" @click="resetData" plain>重置</el-button>
</div>
</el-col>
</el-row>
</div>
<Table :UserData="TableData" :tableConfig="tableconfig"></Table>
</div>
<router-view v-if="!IsManagement"></router-view>
</div>
</template>
`提示：HTML部分就不过多介绍，主要调用的是组件，列表用的是封装好的组件，具体如何封装列表可以看我之前的文章： https://blog.51cto.com/u_15928719/5989464
JS
<script>
import UserData from '@/data/User'
import Table from '@/views/components/Table.vue'
export default {
props:{UserData},
components:{
Table
},
data(){
return{
Userdata:[],
TableData:[],
tableconfig:[],
IsManagement: true, //控制显示
UserItem: [{
value: '1',
label: '塔斯克工业'
}, {
value: '2',
label: '复仇者联盟'
}, {
value: '3',
label: '奥创科技'
}, {
value: '4',
label: '瓦坎达军团'
}, {
value: '5',
label: '神盾局'
}, {
value: '6',
label: '阿斯加德'
}
],
UserPostion: [{
value: '1',
label: 'Java工程师'
}, {
value: '2',
label: 'Web前端工程师'
}, {
value: '3',
label: '系统架构师'
}, {
value: '4',
label: 'UI设计师'
}, {
value: '5',
label: '数据分析师'
}, {
value: '6',
label: '测试工程师'
}
],
UserName: [{
value: '1',
label: '杠铁侠'
}, {
value: '2',
label: '对胀'
}, {
value: '3',
label: '只猪霞'
}, {
value: '4',
label: '鞭福峡'
}, {
value: '5',
label: '抄仁'
}, {
value: '6',
label: '率距人'
}
],
query:{
UserIdValue: '', //ID
UserNameValue: '', //姓名
UserItemValue:'', //团队
UserPostionValue:'',//职位
},
addDatadialog:false, //编辑添加遮罩
dialogtitle:"新增用户",
Isfun:'1', //控制遮罩中确认按钮的显示1：增加，2：编辑，3：查看
UserInfo:{ //用户信息
UserId:'',
UserName:'', //姓名
UserNameValue:'',
UserGender:'', //性别
UserItem:'', //团队
UserItemValue:'',
UserAge:'', //年龄
UserPostion:'', //职位
UserPostionValue:'',
UserPhone:'', //电话
UserEmail:'', //邮箱
UserEntryTime:'', //入职时间
Useraddress:'', //地址
},
UserGender:[
{
value:'1',
label:'男'
},{
value:'2',
label:'女'
}
]
}
},
methods:{
examine(row) { //查看
console.log(row);
this.Isfun = 3
this.dialogtitle = '查看用户'
this.addDatadialog = true
},
Tableconfig(){ //列表配置
this.tableconfig = [
{ //用户姓名
label:'姓名',
width:140,
key:'UserName',
},
{ //用户性别
label:'性别',
width:140,
key:'UserGender',
},
{ //用户年龄
label:'年龄',
width:140,
key:'UserAge',
},
{ //用户团队
label:'团队',
width:180,
key:'UserItem',
},
{ //用户职位
label:'职位',
width:200,
key:'UserPostion',
},
{ //用户电话
label:'电话',
width:200,
key:'UserPhone',
},
{ //用户邮箱
label:'邮箱',
width:250,
key:'UserEmail',
},
{ //用户入职时间
label:'入职时间',
width:150,
key:'UserEntryTime',
},
{ //用户地址
label:'地址',
width:300,
key:'Useraddress',
},
]
},
queryData(){ //查询
this.TableData = []
this.Userdata.forEach((item,index) => {
if (this.query.UserIdValue != '') {
if (this.query.UserIdValue == item.UserId) {
this.TableData.push(this.Userdata[index])
if (this.query.UserNameValue != '') {
if (this.query.UserNameValue == item.UserNameValue) {
return
}else{
this.TableData = []
return
}
}
if(this.query.UserItemValue != ''){
if (this.query.UserItemValue == item.UserItemValue) {
return
}else{
this.TableData = []
return
}
}
if(this.query.UserPostionValue != ''){
if (this.query.UserPostionValue == item.UserPostionValue) {
return
}else{
this.TableData = []
return
}
}
}
}else if (this.query.UserNameValue != '') {
if (this.query.UserNameValue == item.UserNameValue) {
this.TableData.push(this.Userdata[index])
if(this.query.UserItemValue != ''){
if (this.query.UserItemValue == item.UserItemValue) {
return
}else{
this.TableData = []
return
}
}
if(this.query.UserPostionValue != ''){
if (this.query.UserPostionValue == item.UserPostionValue) {
return
}else{
this.TableData = []
return
}
}
}
}else if (this.query.UserItemValue != '') {
if (this.query.UserItemValue == item.UserItemValue) {
this.TableData.push(this.Userdata[index])
if(this.query.UserPostionValue != ''){
if (this.query.UserPostionValue == item.UserPostionValue) {
return
}else{
this.TableData = []
return
}
}
}
}else if (this.query.UserPostionValue != '') {
if (this.query.UserPostionValue == item.UserPostionValue) {
this.TableData.push(this.Userdata[index])
}
}else{
this.TableData = this.Userdata
}
});
},
resetData(){ //重置
this.query.UserIdValue = ''
this.query.UserNameValue = ''
this.query.UserItemValue = ''
this.query.UserPostionValue = ''
},
addData(){ //增加
this.UserInfo.UserId = this.Userdata.length + 1
this.UserInfo.UserId = this.UserInfo.UserId.toString()
this.UserInfo.UserNameValue = this.Userdata.length + 1
this.UserInfo.UserItem = this.UserItem[this.UserInfo.UserItemValue - 1].label
this.UserInfo.UserPostion = this.UserPostion[this.UserInfo.UserPostionValue - 1].label
this.Userdata.push(this.UserInfo)
this.addDatadialog = false
},
editorData(){ //编辑
this.addDatadialog = false
},
path(){
if (this.$route.path == '/home/usermanagement') {
this.IsManagement = true
}else{
this.IsManagement = false
}
}
},
mounted(){
this.path()
this.Userdata = UserData
this.TableData = UserData
this.Tableconfig()
},
watch: {
$route: {
handler: function(){
this.path()
},
// 深度观察监听
deep: true
}
},
}
</script>
CSS
<style>
.el-dialog__body{
padding-right: 40px;
background: #f5f7f7;
border-top: 1px solid #cfd9db;
border-bottom: 1px solid #cfd9db;
}
.Management{
border: 1px solid #EBEEF5;
box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
}
.screeningUser{
padding: 20px;
}
.UserTable{
padding: 10px;
margin: 0px 20px 20px 20px ;
border: 1px solid #EBEEF5;
box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
}
</style>
实现逻辑
主要是使用Element的组件实现的，组件的具体使用，可以去看官方文档。
1.查询
查询我用的办法比较笨，就是用forEach遍历Userdata，然后用if判断进行筛选数据，这里需要注意有两个数据一个是列表的数据(TableData)，和一个保存的数据(Userdata)，因为我这里是没有后台的，源数据是来源于我保存本地的一个JS文件UserData，该文件是JSON的格式，作为模拟后端传入的数据（有后台的数据可以直接替换掉），然后用Userdata存起来，筛选后的数据就存入TableData，所以对于改变列表数据的所有操作都是操作TableData。
2.重置
这个就比较简单，主要就是将筛选条件中的内容清空。
3.添加
添加的话也是比较简单的，主要讲一下自动生成的ID，这个ID我是获取当前数据的长度+1作为ID，其他的也是按照这种逻辑，这块就需要注意，类似于姓名这种中文字符，不能直接对中文进行if，所以需要一个value作为姓名的值，值对应姓名，所以进行数据交互时应对其值进行操作，例this.UserInfo.UserNameValue，而不是this.UserInfo.UserName。
4.查看
查看的话是利用Element的组件，当点击查看时会将当前点击行的值传出，接收并展示出来即可
5.编辑
这个编辑我是偷了一点懒的，因为VUE最大的特性就是数据的双向绑定，当我在这里修改数据会直接改变Userdata中的值，所以压根就不需要进行其他操作，但是有一点问题就是，确认是个摆设，并没有具体功能，正常使用的话其实也很简单，只需要在点击确认后将当前保存的Userdata传给后台就好了。