使用v-cli创建项目，引入element-ui构建用户管理页面实现增删改查

---

前言

记录自己做的一个纯前端的用户管理页面，用V-cli创建，引入elment-ui，实现增删改查功能

---

一、使用v-cli创建vue项目文件

1. 下载node.js，为了里面的npm指令
2. npm install -g @vue/cli下载v-cli
3. vue --version验证是否成功
4. vue create vue_first创建项目，其中vue_first为项目也就是在电脑上文件夹的名字，可以自定义
5. 然后进行配置，跟着教程走，最后附赠两条指令，点进去是hellovue的页面。

二、引入element-ui

1. npm i element-ui -S安装element **注：这是element官网的指令，后面可能会有版本问题，部分组件显示不了
2. 在刚才创建的项目文件中找到main.js，加入如下三行代码引入element

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

三、开始实现功能

1.初步页面，表格绘制

	在element中找到Table组件，选一个适合的copy，代码如下

  <el-table
      :data="tableData"
      >
      //第一列工号
      <el-table-column
        prop="num"
        label="工号"
        fixed>
      </el-table-column>
      //第二列用户名
      <el-table-column
        prop="userName"
        label="用户名"
        fixed>
      </el-table-column>
      //第三列姓名
      <el-table-column
        prop="name"
        label="姓名"
        fixed>
      </el-table-column>
      //第四列操作
      <el-table-column
      align="center"
      label="操作"
      >
      <template slot-scope="scope">
      <el-button-group aligin:right>
       <el-button @click="edit(scope.$index,scope.row)">编辑</el-button>
       <el-button @click="deletee(scope.$index)">删除</el-button>
      </el-button-group>
      </template>
    </el-table-column>  
  </el-table>

后台写死的数据如下

tableData: [{
        num: 1,
        userName: 'zhangsan',
        name: '张三'
      }, {
        num: 2,
        userName: 'lisi',
        name: '李四'
      }, {
        num: 3,
        userName: 'wangwu',
        name: '王五'
      }, {
        num: 4,
        userName: 'zhaoliu',
        name: '赵六'
      }]

效果如下

2.实现增加功能

在表格上面写三个input用于输入工号、用户名、姓名的数据，加一个button按钮进行添加操作。对三个输入框进行v-model双向绑定操作，获取输入的值然后，添加到数组中
各自代码如下
html:

   <el-input
      style="width:20%"
      placeholder="请输入工号"
      v-model="tableDataInfo.num"
       clearable
    ></el-input>    <el-input
      style="width:20%"
      placeholder="请输入用户名"
      v-model="tableDataInfo.userName"
    ></el-input>    <el-input
      style="width:20%"
      placeholder="请输入姓名"
      v-model="tableDataInfo.name"
    ></el-input> 
    <el-button
     type="primary"
     @click="add"
    >增加</el-button> 

js：
data中加一个tableDataInfo用来分别存储输入值

 tableDataInfo:{
        num:'',
        userName:'',
        name:''
      }

 add:function(){
       var data ={
        num:this.tableDataInfo.num,
        userName:this.tableDataInfo.userName,
        name:this.tableDataInfo.name
      }
       if(data.num&&data.userName&&data.userName){//判定是否为空
        this.tableData.push(data) //数组添加
      }else{
        alert("请输入完整信息!")//提示
      }

效果如下

3.实现修改和删除功能

对每条数据都进行修改和删除，所以把两个功能都放进表格里，在第四列操作内加入如下代码

      <template slot-scope="scope">
      <el-button-group aligin:right>
       <el-button @click="edit(scope.$index,scope.row)">编辑</el-button>
       <el-button @click="deletee(scope.$index)">删除</el-button>
      </el-button-group>
      </template>

其中编辑删除法中scope可以获取表格数据

<div v-show="ifshow">
    修改工号<el-input
      style="width:20%"
      placeholder="请输入..."
      v-model="dataEdit.num"
    ></el-input>    修改用户名<el-input
      style="width:20%"
      placeholder="请输入..."
      v-model="dataEdit.userName"
    ></el-input>    修改姓名<el-input
      style="width:20%"
      placeholder="请输入..."
      v-model="dataEdit.name"
    ></el-input> 

点击编辑按钮后，显出编辑界面
js代码如下

  edit:function(index,row){
    
      this.ifshow=!this.ifshow//控制编辑页面显示
      this.dataEdit=row//获取表格数据
      if(this.dataEdit.num>0&&this.dataEdit.userName&&this.dataEdit.name){
        this.tableData[index].num=this.dataEdit.num
        this.tableData[index].userName=this.dataEdit.userName
        this.tableData[index].name=this.dataEdit.name
      }
    },
    deletee:function(index){
      this.tableData.splice(index,1)
    }

效果如下

4.实现查询操作

这个是我搞得最长的功能，查询数组用indexof但是获取不到，最后用来过滤器filter。很简单一段代码如下
html

   查询<el-input
    style="width:20%"
    placeholder="输入用户名查询"
    v-model="text"
    @input="searchh"
    ></el-input> 

js

 created() {
    this.searchResult = this.tableData //存储
  }
  
 searchh:function() {
     this.searchResult=this.tableData.filter(item => item.userName.includes(this.text))
}

其中要新建给searchResult数组来存储写死的数据,然后把table的data改成新建的数组

总结

最终代码如下

<template> 
<div>
   <el-input
      style="width:20%"
      placeholder="请输入工号"
      v-model="tableDataInfo.num"
       clearable
    ></el-input>    <el-input
      style="width:20%"
      placeholder="请输入用户名"
      v-model="tableDataInfo.userName"
    ></el-input>    <el-input
      style="width:20%"
      placeholder="请输入姓名"
      v-model="tableDataInfo.name"
    ></el-input> 
    <el-button
     type="primary"
     @click="add"
    >增加</el-button> 
    查询<el-input
    style="width:20%"
    placeholder="输入用户名查询"
    v-model="text"
    @input="searchh"
    ></el-input> 
     <el-alert
    title="修改数据时,工号应大于0,且其他数值不为空"
    type="info"
    close-text="知道了">
  </el-alert> 
  <el-table
      :data="searchResult"
      >
      //第一列工号
      <el-table-column
        prop="num"
        label="工号"
        fixed>
      </el-table-column>
      //第二列用户名
      <el-table-column
        prop="userName"
        label="用户名"
        fixed>
      </el-table-column>
      //第三列姓名
      <el-table-column
        prop="name"
        label="姓名"
        fixed>
      </el-table-column>
      //第四列操作
      <el-table-column
      align="center"
      label="操作"
      >
      <template slot-scope="scope">
      <el-button-group aligin:right>
       <el-button @click="edit(scope.$index,scope.row)">编辑</el-button>
       <el-button @click="deletee(scope.$index)">删除</el-button>
      </el-button-group>
      </template>
    </el-table-column>  
  </el-table>
  <div v-show="ifshow">
    修改工号<el-input
      style="width:20%"
      placeholder="请输入..."
      v-model="dataEdit.num"
    ></el-input>    修改用户名<el-input
      style="width:20%"
      placeholder="请输入..."
      v-model="dataEdit.userName"
    ></el-input>    修改姓名<el-input
      style="width:20%"
      placeholder="请输入..."
      v-model="dataEdit.name"
    ></el-input> 
  </div>
</div>
</template>
<script>


export default {
  data() {
    return {  
      text:'',
      tableData: [{
        num: 1,
        userName: 'zhangsan',
        name: '张三'
      }, {
        num: 2,
        userName: 'lisi',
        name: '李四'
      }, {
        num: 3,
        userName: 'wangwu',
        name: '王五'
      }, {
        num: 4,
        userName: 'zhaoliu',
        name: '赵六'
      }],
      tableDataInfo:{
        num:'',
        userName:'',
        name:''
      },
      dataEdit:{
        num:'',
        userName:'',
        name:''
      },
      ifshow:false,
      searchResult:[]
    }
  }, 
  created() {
    this.searchResult = this.tableData
  },
  methods:{
    add:function(){
       var data ={
        num:this.tableDataInfo.num,
        userName:this.tableDataInfo.userName,
        name:this.tableDataInfo.name
      }
       if(data.num&&data.userName&&data.userName){//判定是否为空
        this.tableData.push(data)
      }else{
        alert("请输入完整信息!")//提示
      }
    },
    searchh:function() {

     this.searchResult=this.tableData.filter(item => item.userName.includes(this.text))
     
		},
    edit:function(index,row){
      this.ifshow=!this.ifshow
      this.dataEdit=row
      if(this.dataEdit.num>0&&this.dataEdit.userName&&this.dataEdit.name){
        this.tableData[index].num=this.dataEdit.num
        this.tableData[index].userName=this.dataEdit.userName
        this.tableData[index].name=this.dataEdit.name 
      }
    },
    deletee:function(index){
      this.tableData.splice(index,1)
    }
  }
}
</script>

一个小尝试，记录一下，后面可以继续完善，欢迎指正。