ElementUI+MockJS基础

1 ElementUI

Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库。

2 MockJS

Mock.js （官网http://mockjs.com/）是一款模拟数据生成器，旨在帮助前端攻城师独于后端进行开发，帮助编写单元测试。提供了以下模拟功能：
根据数据模板生成模拟数据、模拟 Ajax 请求，生成并返回模拟数据、基于 HTML 模板生成模拟数据。

3 demo

3.1 安装插件

安装elementui ：npm i element-ui -S
main.js：

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
/*引入elementui相关的样式和js*/
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.config.productionTip = false
/*使用elementui*/
Vue.use(ElementUI);


/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

安装Mock.js ：npm install mockjs

3. 2 table表格

User.vue

<template>

  <div>
    <!--
      :data  根据数据展示列表
      @selection-change: 获取选中列表触发事件（返回的是选中的对象列表）
       v-loading="loading" 值为true代表是加载效果
    -->
    <el-table
      :data="tableData"
      v-loading="loading"
      style="width: 100%"
      @selection-change="selectionChange"
    >
      <el-table-column
        type="selection"
        width="55">
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名"
      >
      </el-table-column>
      <el-table-column
        prop="email"
        label="邮箱"
      >
      </el-table-column>
      <el-table-column
        prop="phone"
        label="电话号码">
      </el-table-column>
      <el-table-column
        prop="address"
        label="地址">
      </el-table-column>
      <el-table-column
        prop="createTime"
        label="创建日期">
      </el-table-column>
      
    </el-table>
    

  </div>
</template>

<script>
export default {
    name: 'User',
    data() {
      return “啦啦啦啦”
      }
  }
</script>

<style scoped>

</style>

index.js

import Vue from 'vue'
import Router from 'vue-router'
import User from '@/components/User'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/user',
      name: 'User',
      component: User
    }
  ]
})

3.3 安装axios---->引入axios模块

安装axios：npm install axios --save

• main.js

/*引入axios模块*/
import axios from 'axios'
/*对Vue对象进行扩展属性$http*/
Vue.prototype.$http = axios;

3.4 直接发送ajax请求去拿数据—》报404—》因为你要引入user.js文件

• user.js

//引入mockjs
var Mock = require('mockjs')
let result = Mock.mock({
  'list|203':[{
    'id': '@increment',
    'name': '@cname',
    'phone': /^1[0-9]{10}$/,
    'email': '@email',
    'address': '@county(true)',
    'createTime': '@date("yyyy-MM-dd")'
  }]
})
//console.debug(JSON.stringify(result));

/**
 * 对外暴露的资源
 */
Mock.mock("/user/list","post", function (options) {

  let data = result.list;
  //响应数据
  return {
    data: data
  };
});

• User.vue

<script>
  import User from "../js/user";
  export default {
    name: 'User',
    data() {
      return {
        loading: true,
        tableData: [],
        selectRows: []
      };
    },
    methods: {
      //加载列表
      loadUserList() {
        this.loading = true;
        this.$http.post("/user/list").then(res => {
          this.tableData = res.data.data;
          this.loading = false;
        });
      },
      //多选
      selectionChange(v) {
        this.selectRows = v;
      }
</script>

<style scoped>

</style>

3.5 分页

3.5.1 把分页条拷贝过来

• User.vue

<div>
....
 <!--分页-->
    <el-pagination style="margin-top: 10px;"
                   @size-change="sizeChange"
                   @current-change="currentChange"
                   :current-page="currentPage"
                   :page-sizes="pageSizes"
                   :page-size="pageSize"
                   layout="total, sizes, prev, pager, next, jumper"
                   :total="total">
    </el-pagination>
    </div>

3.5.2 给一些数据写上默认值

• User.vue

data() {
      return {
        loading: true,
        tableData: [],
        selectRows: [],

        //分页相关
        //当前页
        currentPage: 1,
        //每页条数集合
        pageSizes: [5, 10, 15, 20],
        //每页条数
        pageSize: 10,
        //总数
        total: 0,
      };
    }
methods:{...
//每页条数改变
      sizeChange(v) {
        this.currentPage = 1;
        this.pageSize = v;
        this.loadUserList();
        //加载框
        this.loading = true;
      },
      //当前页改变
      currentChange(v) {
        this.currentPage = v;
        this.loadUserList();
        //加载框
        this.loading = true
      }
      }

3.6 获取列表传递参数（当前页，每页条数）—》后台会自动计算，返回列表数据和总条数

• user.js

Mock.mock("/user/list","post", function (options) {
  //获取json字符串
  let paramJsonStr = options.body;
  //将字符串转换为json格式
  let paramjson = JSON.parse(paramJsonStr);

  //获取当前页
  let currentPage = paramjson.currentPage;
  //获取每页条数
  let pageSize = paramjson.pageSize;

  let data = result.list;
  let begin = (currentPage - 1) * pageSize;
  let end = currentPage*pageSize;
  //响应数据
  return {
    data: data.slice(begin,end),
    total:result.list.length
  };
});

3.7 前端获取列表，前端获取总条数（恭喜大家分页完成）

• User.vue

methods: {
      //加载列表
      loadUserList() {
        //查询传递参数
        let params = {
          "currentPage": this.currentPage,
          "pageSize": this.pageSize
        }
        this.loading = true;
        this.$http.post("/user/list", params).then(res => {
          this.tableData = res.data.data;
          this.total = res.data.total;
          this.loading = false;
        });
      }
  }

3.8 把操作对应的2个按钮拷贝过来（编辑/删除）

• User.vue

 <el-table>
 ....
<!--操作-->
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            size="mini"
            @click="handleEdit(scope.$index, scope.row)">编辑
          </el-button>
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)">删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

3.9 删除(当前行对应的索引， 当前行对应的对象)

User.js

Mock.mock("/user/remove","post", function (options) {
  //获取json字符串
  let paramJsonStr = options.body;
  //将字符串转换为json格式
  let paramjson = JSON.parse(paramJsonStr);
  console.log(paramjson)
  let msg = "";
  if (paramjson.name){
    msg = paramjson.name + "    删除成功！"
  }else {
    msg = "共删除" + paramjson.rows.length + "条数据"
  }
  //响应数据
  return {
    success:true,
    msg: msg
  };
});

3.10 确认删除

User.vue

 //删除一条数据
      handleDelete(i, r) {
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$http.post("/user/remove", r).then(res => {
            if (res.data.success) {
              this.$message({
                type: 'success',
                message: res.data.msg
              });
              this.loadUserList();
            }
          })
        }).catch(() => {

        });
      }

3.11批量删除

User.vue

//template
 <!--批量删除-->
    <el-button type="danger" style="float: left;margin-left: 20px" @click="batchRemove">删除</el-button>
   //js
//批量删除
      batchRemove() {
        if (!this.selectRows.length) {
          this.$message.error('亲！请选中数据进行删除哦！！');
          return;
        }
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$http.post("/user/remove", {"rows": this.selectRows}).then(res => {
            if (res.data.success) {
              this.$message({
                type: 'success',
                message: res.data.msg
              });
              this.loadUserList();
            }
          })
        }).catch(() => {

        });
      },

3.12 高级查询（双向绑定）

User.vue

 <!--查询的form表单-->
    <el-form :inline="true" :model="searchForm" class="demo-form-inline">
      <el-form-item label="用户名">
        <el-input v-model="searchForm.name" placeholder="用户名"></el-input>
      </el-form-item>
      <el-form-item label="邮箱">
        <el-input v-model="searchForm.email" placeholder="邮箱"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="searchSubmit">查询</el-button>
      </el-form-item>
    </el-form>

data:{
return {
//搜索条件form model
        searchForm:{
          name:"",
          email:""
        }
    }
 }

methods:{
 //搜索框
      searchSubmit(){
        this.$message({
          type: 'success',
          message: this.searchForm.name+ " " +this.searchForm.email
        });
        this.loadUserList();
      }
}

3.13 新增添加按钮

<!--添加-->
    <el-button type="primary" style="float: left;" @click="add">新增</el-button>

3.13.1修改标题

 //新增
      add(){
        for(let k in this.form){
          this.form[k] = ""
        }
        this.visible = true,
        this.title = "添加用户"
      }

3.13.2弹出窗体

<!--修改、添加弹出框-->
    <el-dialog :visible.sync="visible" :title="title">
      <el-form :model="form" label-width="80px">
        <el-form-item label="姓名">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="邮箱">
          <el-input v-model="form.email"></el-input>
        </el-form-item>
        <el-form-item label="电话">
          <el-input v-model="form.phone"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
          <el-button @click="visible = false">取 消</el-button>
          <el-button type="primary" @click="visible = false">确 定</el-button>
        </span>
    </el-dialog>

3.14编辑

  handleEdit(i, r) {
        for(let k in r){
          this.form[k] = r[k]
        }
        this.visible = true,
          this.title = "更新用户"
      }