3
基于vue+Element Table封装（纯前端解决方案，附源码）
source link: https://blog.51cto.com/u_15928719/5995458
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
基于vue+Element Table封装（纯前端解决方案，附源码）
精选 原创
这个项目是拿来练手的项目，基于VUE+Element UI，并没有做后端，所以用的是纯前端的解决方案（有更好的办法欢迎提出），主要实现的是对列表数据的查询，筛选，修改这些常用功能。
增加
<!-- 用户管理 -->
<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
<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>
<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的组件实现的，组件的具体使用，可以去看官方文档。
查询我用的办法比较笨，就是用forEach遍历Userdata，然后用if判断进行筛选数据，这里需要注意有两个数据一个是列表的数据(TableData)，和一个保存的数据(Userdata)，因为我这里是没有后台的，源数据是来源于我保存本地的一个JS文件UserData，该文件是JSON的格式，作为模拟后端传入的数据（有后台的数据可以直接替换掉），然后用Userdata存起来，筛选后的数据就存入TableData，所以对于改变列表数据的所有操作都是操作TableData。
这个就比较简单，主要就是将筛选条件中的内容清空。
添加的话也是比较简单的，主要讲一下自动生成的ID，这个ID我是获取当前数据的长度+1作为ID，其他的也是按照这种逻辑，这块就需要注意，类似于姓名这种中文字符，不能直接对中文进行if，所以需要一个value作为姓名的值，值对应姓名，所以进行数据交互时应对其值进行操作，例this.UserInfo.UserNameValue，而不是this.UserInfo.UserName。
查看的话是利用Element的组件，当点击查看时会将当前点击行的值传出，接收并展示出来即可
这个编辑我是偷了一点懒的，因为VUE最大的特性就是数据的双向绑定，当我在这里修改数据会直接改变Userdata中的值，所以压根就不需要进行其他操作，但是有一点问题就是，确认是个摆设，并没有具体功能，正常使用的话其实也很简单，只需要在点击确认后将当前保存的Userdata传给后台就好了。
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK