首页 > 编程语言 >基于vue+Element Table封装（纯前端解决方案，附源码）

基于vue+Element Table封装（纯前端解决方案，附源码）

时间：2023-01-07 14:10:27浏览次数：49  
标签：Userdata vue value label 源码 UserPostionValue query Element TableData

(文章目录)

前言

这个项目是拿来练手的项目，基于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传给后台就好了。

标签：Userdata,vue,value,label,源码,UserPostionValue,query,Element,TableData
From： https://blog.51cto.com/u_15928719/5995458

相关文章

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99