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

Posted 2023-01-08

(文章目录)

---

前言

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