ElementUI使用

1. 环境准备

  • 初始化Vue项目

    vue init webpack

  • 安装elementUI

    npm i element-ui -S

  • 运行项目

    npm run dev

2. 使用

①：在main.js中引入elementUI组件

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

②：创建一个组件

User.vue

③：创建一个路由引入组件

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import User from '@/components/User'
Vue.use(Router)
export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path: '/user/list',
      name: 'User',
      component: User
    }
  ]
})

此时开启服务：npm run dev 可以通过localhost：8080/user/list；来访问组件了，但此时还是空的！没有任何内容！

④：在组件中创建一个表格

  <template>
    <el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column
        prop="date"
        label="日期"
        width="180">
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名"
        width="180">
      </el-table-column>
      <el-table-column
        prop="address"
        label="地址">
      </el-table-column>
    </el-table>
  </template>

  <script>
    export default {
      data() {
        return {
          tableData: [{
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
          }, {
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1517 弄'
          }, {
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1519 弄'
          }, {
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1516 弄'
          }]
        }
      }
    }
  </script>

可以看出数据来源tableData

3.Mockjs模拟数据

  1. 安装mokejs

    npm install mockjs

  2. 新建一个user.js文件，用来模拟后台数据

    • 是用commonjs的方式引入

      let mock = require("mockjs")

    • 模拟数据，具体规则参考官网文档,或者从网上复制

      let data = Mock.mock({
   "user|30": [{   // 随机生成1到3个数组元素
     'name': '@cname',  // 中文名称
     'id|+1': 88,    // 属性值自动加 1，初始值为88
     'age|18-28': 0,   // 18至28以内随机整数, 0只是用来确定类型
     'birthday': '@date("yyyy-MM-dd")',  // 日期
     'city': '@city(true)',   // 中国城市
     'color': '@color',  // 16进制颜色
   }]
})

  1. 数据有了，如何返回在表格中展示呢？需要用到axios发送ajax请求，mockjs拦截ajax请求，并把数据返回回去！

    • 安装axios

      npm install axios --save

    • 在main.js中引入

      import axios from 'axios'

    • 配置全局属性，挂靠在原型上，在任意组件内都可以使用this.$http获得axios对象

      Vue.prototype.$http = axios

  2. 发送axios请求来获取数据,写在methods属性内

    • 在User.vue组件中引入user.js

      import 'user'

    • 发送axios请求

    <script>
  import 'user'
  export default {
    data() {
      return {
        tableData: []
      }
    },
    methods:{
      loadList(){
        this.$http.post('user/list').then(res=>{
          //返回的数据赋值给tableData表格中
          this.tableData = res
        }).catch()
      }
    }
  }
</script>
    • mockjs拦截ajax请求返回数据
     let Mock = require("mockjs")
 let list = Mock.mock({
   "user|30": [{   // 随机生成1到3个数组元素
     'name': '@cname',  // 中文名称
     'id|+1': 88,    // 属性值自动加 1，初始值为88
     'age|18-28': 0,   // 18至28以内随机整数, 0只是用来确定类型
     'birthday': '@date("yyyy-MM-dd")',  // 日期
     'city': '@city(true)',   // 中国城市
     'color': '@color',  // 16进制颜色
   }]
 })
 //console.debug(data)
 Mock.mock('/user/list','post',function (option) {
   return{
     list:list
   }
 })
    • 什么时候执行loadList函数来获取数据呢，在页面加载完成后，使用mounted函数，它可以在页面渲染完毕后，执行其中的内容！
      import User from '../js/user'
  export default {
    name:'User',
    data() {
      return {
        tableData: []
      }
    },
   methods:{
      loadList(){
        this.$http.post('user/list').then(res=>{
          //返回的数据赋值给tableData表格中
          console.debug(res)
          //this.tableData = res.list
        })
      },
    },
    mounted(){
      //当页面加载完毕的时候发送ajax请求
      this.loadList();
    }
  }

4. 分页

  • 首先准备一个分页条
  <div class="block">
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage4"
      :page-sizes="[100, 200, 300, 400]"
      :page-size="100"
      layout="total, sizes, prev, pager, next, jumper"
      :total="400">
    </el-pagination>
  </div>

@size-change是绑定了一个改变事件，在页面中如果我们改变了每页的大小，它应该动态的展示相应大小的数据

：是v-blind的简写形式，动态的绑定一个属性，当这个属性发生改变的时候，他也会随着发生改变

  • 动态获取分页数据

上面的数据都是写死了，现在要动态的获取数据，怎么做呢？我们知道每页大小和当前页都是可以改变的，此时绑定一个属性，使用data这个函数来返回我们需要的数据！

<div class="block">
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[10, 15, 20, 25,30]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
  </div>

    data() {
      return {
        tableData: [],
        currentPage:1,
        pageSize:10,
        total:total,
      }
    }

data函数返回的是一个json字符串，此时界面就会根据这个绑定的数据来渲染！我们给当前页和页面大小一个默认数据！在loadList这个函数中，它本身就是去获取表格数据，但是现在需要去加分页条件了，把分页的条件传递过去！

        loadList(){
        this.$http.post('/user/list',{
          currentPage:this.currentPage,
          pageSize:this.pageSize,
          total:this.total}).then(res=>{
          this.tableData = res.data.list.user
        })
      }

一定要使用this，才表示是data中的数据！

  • 在拦截到的ajax请求中，对其进行处理！
Mock.mock('/user/list','post',function (option) {
   console.debug(result)
   let pageData = JSON.parse(option.body);
   let begein = (pageData.currentPage-1)*pageData.pageSize;
   let end = pageData.currentPage*pageData.pageSize;
   return{
     list:result.user.slice(begein,end),
     total:result.user.length
   }
 })

分页数据传递过来时是封装在option中的body里的，但是直接取出来是一个字符串，所以要转化未json对象，有了当前页和页面大小，就可以把数组分割成需要的大小并返回回去！

接收到相应的数据时取出来赋值给属性

        loadList(){
        this.$http.post('/user/list',{
          currentPage:this.currentPage,
          pageSize:this.pageSize,
          }).then(res=>{
          //返回的数据赋值给tableData表格中
          console.debug(res)
         this.tableData = res.data.list
         this.total = res.data.total
        })
      }

handleSizeChange与handleCurrentChange是两个改变事件需要写在方法中，当页面大小发生改变或着当前页发生改变时，应该调用loadList这个函数去重新加载数据！

    handleSizeChange(v){
        this.pagesize = v;
       this.loadList();
     },
     handleCurrentChange(v){
        this.currentPage = v;
        this.loadList();
     },

5. 删除

5.1 删除单个

  • 新建一列，准备两个按钮
      <template slot-scope="scope">
        <el-button @click="handleClick(scope.row)" type="text" size="small">编辑</el-button>
        <el-button @click="delclick(scope.row)" type="text" size="small">删除</el-button>
      </template>

  • 绑定点击事件,当触发了删除事件时，先给出提示，询问是否确认删除？确认后会把当前行的数据发送出去！并且接收响应的结果展示出来！

    询问是否删除使用气泡询问框：

      <template slot-scope="scope">
        <el-button @click="editclick(scope.row)" type="text" size="small">编辑</el-button>
        <el-popconfirm
          title="亲，确定要删除我吗？"
          confirmButtonText='是的'
          cancelButtonText='不用了'
          icon="el-icon-info"
          iconColor="red"
          @onConfirm="delclick(scope.row)"
        >
          <el-button  type="text" size="small " slot="reference">删除</el-button>
        </el-popconfirm>
      </template>

        delclick(v){
        //console.debug(v)
       this.$http.post('/user/del',v).then(res=>{
        if(res.data.success){
          const h = this.$createElement;
          this.$notify({
            title: res.data.message,
            message: h('i', { style: 'color: teal'}, v.name+'已被丢弃')
          });
        }
       }).catch()
     },
  • 数据传递过来后，应该相应一个结果。是删除成功还是失败
 Mock.mock('/user/del','post',function(option){
   let obj = JSON.parse(option.body);
    console.debug(obj.id)
   return{
      success:true,
      message:'删除成功！'
   }
 })

5.2 删除多个

  • 新建一列加上复选框
    <el-table-column
      type="selection"
      width="55">
    </el-table-column>
  • 在表格中添加选中改变事件来获取选中的行
@selection-change="getSelectedRows"
  • data函数中绑定该属性
    data() {
      return {
        tableData: [],
        currentPage:1,
        pageSize:10,
        total:1,
        selectRows:[],
      }
    },
  • 获取到选中的行的时候动态改变selectRows的值
    getSelectedRows(v){
       console.debug(v)
        this.selectRows = v;
     }
  • 添加一个按钮来触发批量删除事件
    <el-row>
      <el-button @click="batchDel" type="danger" icon="el-icon-delete" size="mini" style="float: left;margin: 5px">
      </el-button>
    </el-row>
  • 触发时传递选中的所有数据，先判断是否选中一行，如果一行都没选中则给出提示！删除成功给出提示！
     batchDel(){
       if(!this.selectRows.length){
         this.$message({
           message: '亲，请至少选中一行哦！',
           type: 'warning'
         });
         return;
       }
       this.$http.post('/user/batchdel',{rows:this.selectRows}).then(res=>{
         if(res.data.success){
           const h = this.$createElement;
           this.$notify({
             title: res.data.message,
             message: h('i', { style: 'color: teal'}, '这些数据已被丢弃！')
           });
         }
       }).catch()
     }

6. 编辑

  • 为编辑按钮注册点击事件，点击编辑弹出对话框表单！他会把这行的数据传递过去！
<el-button @click="editclick(scope.row)" type="text" size="small">编辑</el-button>
  • 准备一个对话框表单
    <el-dialog :title="title" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="姓名">
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="年龄">
          <el-input v-model="form.age" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="生日">
          <el-input v-model="form.birthday" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="城市">
          <el-input v-model="form.city" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="updateSubmit">确 定</el-button>
      </div>
    </el-dialog>
  • 所有的属性我都想要动态的生成数据！在data函数中绑定数据
    data() {
      return {
        tableData: [],
        currentPage:1,
        pageSize:10,
        total:1,
        selectRows:[],
        title:"",
        dialogFormVisible:false,
        form:{
          name:'',
          age:'',
          birthday:'',
          city:'',
        }
      }
    }
  • 使用for in 来遍历对象的属性，使用obj[key]可以取到对象属性对应的值
  • 点击编辑，应该弹出表单，回显数据！弹出表单直接使dialogFormVisible的属性为true即可！
  • 对象通过属性获取值可以使用object[attribute] = value 
     editclick(row){
        this.dialogFormVisible = true
       for(let i in row){
        this.form[i] = row[i];
       }
     },
  • 点击确定将数据通过ajax发送出去！最后响应结果
        updateSubmit(){
        this.$http.post('/user/updata',{form:this.form}).then(res=>{
          if(res.data.success){
            const h = this.$createElement;
            this.$notify({
              title: res.data.message,
              message: h('i', { style: 'color: teal'}, this.form.name+'修改成功')
            });
          }
        }).catch()
     },

7. 高级查询

  • 新建高级查询的输入框
    <el-form :inline="true" :model="user" class="demo-form-inline">
      <el-form-item label="姓名">
        <el-input v-model="user.name" placeholder="姓名"></el-input>
      </el-form-item>
      <el-form-item label="城市">
        <el-input v-model="user.name" placeholder="城市"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
      </el-form-item>
    </el-form>
  • 动态绑定数据
    data() {
      return {
        tableData: [],
        currentPage:1,
        pageSize:10,
        total:1,
        selectRows:[],
        title:"",
        dialogFormVisible:false,
        form:{
          name:'',
          age:'',
          birthday:'',
          city:'',
        },
        user:{
          name:'',
          city:''
        }

      }
    }
  • 点击查询，讲数据发送到后台
   methods:{
      onSubmit(){
        this.$http.post('/user/search',{user:this.user}).then(res=>{
          
        }).catch()
      }

8. 添加

  • 新建一个添加按钮
      <el-form-item>
        <el-button type="primary" @click="add">添加</el-button>
      </el-form-item>
  • 点击添加，弹出对话框表单，使dialogFormVisible的属性为true即可！
      add(){
        this.dialogFormVisible = true;
        this.title = '添加'
      }
  • 点击提交，讲数据发送到后台，跟修改是一样的！
        this.$http.post('/user/updata',{form:this.form}).then(res=>{
          if(res.data.success){
            const h = this.$createElement;
            this.$notify({
              title: res.data.message,
              message: h('i', { style: 'color: teal'}, this.form.name+'修改成功')
            });
          }
        }).catch()
     }
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 196,264评论 5赞 462
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 82,549评论 2赞 373
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 143,389评论 0赞 325
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 52,616评论 1赞 267
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 61,461评论 5赞 358
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 46,351评论 1赞 273
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 36,776评论 3赞 387
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 35,414评论 0赞 255
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 39,722评论 1赞 294
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,760评论 2赞 314
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,537评论 1赞 326
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 32,381评论 3赞 315
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 37,787评论 3赞 300
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,030评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,304评论 1赞 252
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 41,734评论 2赞 342
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 40,943评论 2赞 336

推荐阅读更多精彩内容