element ui_element ui 漏洞 - CSDN
精华内容
参与话题
  • element-ui入门

    万次阅读 2019-03-08 11:39:17
    element-ui是一个ui库,它不依赖于vue。但是却是当前和vue配合做项目开发的一个比较好的ui框架。 其设计原则为: 一致性 Consistency 与现实生活一致:与现实生活的流程、逻辑保持一致,遵循用户习惯的语言和概念...

    简介
    element-ui是一个ui库,它不依赖于vue。但是却是当前和vue配合做项目开发的一个比较好的ui框架。

    其设计原则为:

    一致性 Consistency

    1. 与现实生活一致:与现实生活的流程、逻辑保持一致,遵循用户习惯的语言和概念;
    2. 在界面中一致:所有的元素和结构需保持一致,比如:设计样式、图标和文本、元素的位置等。

    反馈 Feedback

    1. 控制反馈:通过界面样式和交互动效让用户可以清晰的感知自己的操作;
    2. 页面反馈:操作后,通过页面元素的变化清晰地展现当前状态。

    效率 Efficiency

    1. 简化流程:设计简洁直观的操作流程;
    2. 清晰明确:语言表达清晰且表意明确,让用户快速理解进而作出决策;
    3. 帮助用户识别:界面简单直白,让用户快速识别而非回忆,减少用户记忆负担。

    可控 Controllability

    1. 用户决策:根据场景可给予用户操作建议或安全提示,但不能代替用户进行决策;
    2. 结果可控:用户可以自由的进行操作,包括撤销、回退和终止当前操作等。

     

    Layout布局(el-row、el-col)
    element-ui借用了bootstrap框架的思想,使用了栅格布局。它把单一的分栏分为24列。基本的使用方式如下

    <el-row>
            <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
            <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
            <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
            <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
          </el-row>



    span属性:表示col所要占领的栅格占比个数。 
    offset属性:表示col相对偏移的个数。

    Container布局容器
    这些布局容器,一般充当div来使用。

    el-container:外层容器。当子元素中包含 el-header 或 el-footer 时,全部子元素会垂直上下排列,否则会水平左右排列。

    el-header:顶栏容器

    el-footer:底部栏容器

    el-aside:侧边栏容器

    el-main:页面主视图

    icons的使用
    在element-ui 中,图标是用class就可以搞定的。

    比如一个编辑的图标就可以如下表示:

    <i class="el-icon-edit"></i>
    1
    按钮(el-button)
    按钮是el-button来表示的

    按钮是分类的,每一种类型就对应不同的button。

    按钮的类型type可取值:’primary’、’success’、’warning’、’info’、’danger’

    plain:决定了按钮是否使用素色系列。

    round:决定了按钮是不是圆角展示。

    <div class="flex-box">
          <h2>各种button</h2>
          <el-row class="flex1 margin-left10">
            <el-col :span="3"><el-button>默认按钮</el-button></el-col>
            <el-col :span="3"><el-button type="primary">主要按钮</el-button></el-col>
            <el-col :span="3"><el-button type="success">成功按钮</el-button></el-col>
            <el-col :span="3"><el-button type="warning">警告按钮</el-button></el-col>
            <el-col :span="3"><el-button plain>默认按钮</el-button></el-col>
            <el-col :span="3"><el-button round>默认按钮</el-button></el-col>
          </el-row>
        </div>



    级联选择(el-cascader)

     

    //组件
    <el-cascader
     :options="options"
      v-model="selectedOptions"
      @change="handleChange">
    </el-cascader>
    //data数据
    options: [{
      value:'1',
      label:'components',
      children: [{
        label:'input'
      },{
        label:'swiper'
      }]
    },{
      value:'1',
      label:'views'
    },{
      value:'1',
      label:'actions'
    }]


    TimePicker 时间选择器
    picker-options是一个对象。

    这个对象的属性有start、step、end、selectableRange等。

    当设置selectableRange属性时,它提供了一个时间选择的点。

    <el-time-select
      v-model="value1"
      :picker-options="{
          start:'08:30',
          step:'00:15',
          end:'18:30'
      }"
      placeholder="选择时间"
    ></el-time-select>


    日期选择器
    日期选择器的type属性,决定选择的类型,这个type可以是date、week、month、year。

    <el-date-picker
      v-model="valueDate"
      type="date"
      placeholder="选择日期">
    </el-date-picker>

     

    <el-date-picker
        type='week'
        v-model='value'
        placeholder='选择周'
    >
    </el-date-picker>



    DateTimePicker 日期时间选择器
    本质就是把type改为datetime。

    <el-date-picker
     v-model="value1"
      type="datetime"
      placeholder="选择日期时间">
    </el-date-picker>



    form表单
    element-ui的form表单组件:el-form

    element-ui的formItem组件:el-form-item

    一个简单的form表单的实现如下:

    <el-form :model=''>
        <el-form-item label='用户名'>
            <el-input></el-input>
        </el-form-item>
        <el-form-item label='密码'>
            <el-input></el-input>
        </el-form-item>
    </el-form>



    form表单还有验证:form的rules就是用来验证使用。

    Table 表格
    el-table:element-ui的表格。

    el-table-column:element-ui的表格所对应的列。

    table属性中:stripe属性可以创建带斑马纹的表格。

    table属性中:border属性可以创建带斑马纹的表格。

    table属性中:height属性可实现固定表头的表格。

    <el-table
       :data="tableData"
       style="width: 100%"
       height="200"
     >
       <el-table-column fixed width="120" label="日期" prop="date"></el-table-column>
       <el-table-column width="120" label="姓名" prop="name"></el-table-column>
       <el-table-column width="360" label="地址" prop="address"></el-table-column>
     </el-table>



    Carousel 走马灯
    其实就相当于一个轮播

    type属性:可以让轮播卡片化

    interval属性:定义轮播切换的周期

    <el-carousel height="150px">
     <el-carousel-item v-for="item in 4" :key="item">
        <h3>{{ item }}</h3>
      </el-carousel-item>
    </el-carousel>


    Collapse 折叠面板
    折叠面板的el-collapse-item需要title属性。

    <el-collapse-item title="一致性 Consistency" name="1">
      <div>与现实生活一致:与现实生活的流程、逻辑保持一致,遵循用户习惯的语言和概念;</div>
      <div>在界面中一致:所有的元素和结构需保持一致,比如:设计样式、图标和文本、元素的位置等。</div>
    </el-collapse-item>



    Navigation 导航
    el-menu
    el-menu:表示导航菜单的盒子。 
    el-submenu:表示导航菜单的子盒子选项。 
    el-menu-item:表示导航菜单的每一项。

    其中submenu和munuitem都是用于属性index。

    <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
      <el-menu-item index="1">处理中心</el-menu-item>
      <el-submenu index="2">
        <template slot="title">我的工作台</template>
        <el-menu-item index="2-1">选项1</el-menu-item>
        <el-menu-item index="2-2">选项2</el-menu-item>
        <el-menu-item index="2-3">选项3</el-menu-item>
      </el-submenu>
      <el-menu-item index="3">订单管理</el-menu-item>
    </el-menu>



    el-tabs

    <el-tabs v-model="activeName">
        <el-tab-pane label="用户管理" name="first">
            用户管理
        </el-tab-pane>
    </el-tabs>


    Tree 树形控件
    data属性:代表着树形组件的渲染。

    <el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick"></el-tree>

    完整组件列表和引入方式

    import Vue from 'vue';
    import {
      Pagination,
      Dialog,
      Autocomplete,
      Dropdown,
      DropdownMenu,
      DropdownItem,
      Menu,
      Submenu,
      MenuItem,
      MenuItemGroup,
      Input,
      InputNumber,
      Radio,
      RadioGroup,
      RadioButton,
      Checkbox,
      CheckboxButton,
      CheckboxGroup,
      Switch,
      Select,
      Option,
      OptionGroup,
      Button,
      ButtonGroup,
      Table,
      TableColumn,
      DatePicker,
      TimeSelect,
      TimePicker,
      Popover,
      Tooltip,
      Breadcrumb,
      BreadcrumbItem,
      Form,
      FormItem,
      Tabs,
      TabPane,
      Tag,
      Tree,
      Alert,
      Slider,
      Icon,
      Row,
      Col,
      Upload,
      Progress,
      Badge,
      Card,
      Rate,
      Steps,
      Step,
      Carousel,
      CarouselItem,
      Collapse,
      CollapseItem,
      Cascader,
      ColorPicker,
      Transfer,
      Container,
      Header,
      Aside,
      Main,
      Footer,
      Loading,
      MessageBox,
      Message,
      Notification
    } from 'element-ui';
    
    Vue.use(Pagination);
    Vue.use(Dialog);
    Vue.use(Autocomplete);
    Vue.use(Dropdown);
    Vue.use(DropdownMenu);
    Vue.use(DropdownItem);
    Vue.use(Menu);
    Vue.use(Submenu);
    Vue.use(MenuItem);
    Vue.use(MenuItemGroup);
    Vue.use(Input);
    Vue.use(InputNumber);
    Vue.use(Radio);
    Vue.use(RadioGroup);
    Vue.use(RadioButton);
    Vue.use(Checkbox);
    Vue.use(CheckboxButton);
    Vue.use(CheckboxGroup);
    Vue.use(Switch);
    Vue.use(Select);
    Vue.use(Option);
    Vue.use(OptionGroup);
    Vue.use(Button);
    Vue.use(ButtonGroup);
    Vue.use(Table);
    Vue.use(TableColumn);
    Vue.use(DatePicker);
    Vue.use(TimeSelect);
    Vue.use(TimePicker);
    Vue.use(Popover);
    Vue.use(Tooltip);
    Vue.use(Breadcrumb);
    Vue.use(BreadcrumbItem);
    Vue.use(Form);
    Vue.use(FormItem);
    Vue.use(Tabs);
    Vue.use(TabPane);
    Vue.use(Tag);
    Vue.use(Tree);
    Vue.use(Alert);
    Vue.use(Slider);
    Vue.use(Icon);
    Vue.use(Row);
    Vue.use(Col);
    Vue.use(Upload);
    Vue.use(Progress);
    Vue.use(Badge);
    Vue.use(Card);
    Vue.use(Rate);
    Vue.use(Steps);
    Vue.use(Step);
    Vue.use(Carousel);
    Vue.use(CarouselItem);
    Vue.use(Collapse);
    Vue.use(CollapseItem);
    Vue.use(Cascader);
    Vue.use(ColorPicker);
    Vue.use(Transfer);
    Vue.use(Container);
    Vue.use(Header);
    Vue.use(Aside);
    Vue.use(Main);
    Vue.use(Footer);
    
    Vue.use(Loading.directive);
    
    Vue.prototype.$loading = Loading.service;
    Vue.prototype.$msgbox = MessageBox;
    Vue.prototype.$alert = MessageBox.alert;
    Vue.prototype.$confirm = MessageBox.confirm;
    Vue.prototype.$prompt = MessageBox.prompt;
    Vue.prototype.$notify = Notification;
    Vue.prototype.$message = Message;

     

     

     

    展开全文
  • VueJS可以说是近些年来最火的前端框架之一,越来越多的网站开始使用vue作为前端框架,vuejs轻量、简单,对于前端友好,学习路线平坦,这使得前端开发变得更加简易,而基于vuejs的前端组件库也越来越多。...

    VueJS可以说是近些年来最火的前端框架之一,越来越多的网站开始使用vue作为前端框架,vuejs轻量、简单,对于前端友好,学习路线平坦,这使得前端开发变得更加简易,而基于vuejs的前端组件库也越来越多。其中ElementUI,就是饿了么团队开发的一款基于vue的前端组件库。构建网站的必备环境:

    • NodeJS(npm)
    • Webstorm (前端IDE)
    • Nginx(后期用来转发请求到后台服务器)

    由于我们需要使用npm的包管理器,所以首先得先安装nodejs,  直接在node官网下载

    windows系统直接下载  .msi。下载完毕直接双击安装就ok啦

    安装完毕,打开cmd 输入命令 npm -v 查看是否安装成功以及版本

    打开webstorm,点击左上角File->New->Edit File Templates,在弹出的对话框中点击左上角的绿色加号,然后按照如图显示填写Name和Extension,

    在下方橙色区域的代码段内填写

    <template>
        <div>
        </div>
    </template>
    <script type="text/ecmascript-6">
        export default {
            data(){
                return {
    
                }
            }
        }
    </script>
    

    然后点击apply,再点击ok即可。现在我们再次点击左上角File->New,可以看到刚才创建的vue template已经出现了。我们点击vue template,名称填写test,可以看到新创建的文件就是刚才我们创建的模版的样子,如图。 

    然后再设置编辑器的为ES6语法 如图

    创建ElementUI工程

    ① 使用 git 命令git clone https://github.com/ElementUI/element-starter.git下载官方提供的模板, 
    ② 使用cnpm intsall下载依赖的模块(没有淘宝镜像 cnpm 可以使用npm install) 
    ③ 使用npm run dev运行项目

    可以看到里面已经集成了bable、webpack等插件。不需要我们自己去配置。我们导入这个工程之后,需要做的一件事就是将npm模块安装到这个目录下。我们打开命令行,进入当前工程的根目录,然后输入

    npm install

    如果安装速度较慢,可以使用npm依赖包在国内由阿里云提供的镜像,如下所示

    npm install --registry=http://registry.npm.taobao.org

    点击回车。

    安装结束后我们可以看到工程目录下多了一个node_modules的文件夹,该文件夹就是工程的依赖包所在。以后我们如果想添加依赖包,就可以继续用上文的指令,例如如果想加入vue-router,那么需要输入

    npm install vue-router --save

    npm会自动寻找最新版本的依赖包进行安装。

    工程打包运行

    安装好依赖之后,我们可以对工程进行打包和运行。我们仍然是使用命令行,进入当前工程的目录,并输入

    npm run dev

    这段代码的意思就是以本地服务器的端口启动这个工程。关于本地服务器的配置信息,在工程根目录的webpack.config.js中,我们可以在该文件中看到如下代码段:

    devServer: {
        host: '127.0.0.1',
        port: 8010,
        proxy: {
          '/api/': {
            target: 'http://127.0.0.1:8080',
            changeOrigin: true,
            pathRewrite: {
              '^/api': ''
            }
          }
        },
    •  

    这里的配置信息写的很清楚,本地的服务器端口为8010,如果我们想改变端口号或主机名,只要改变这里对应的字段即可。 
    我们输入npm run dev后,会出现一长串信息,最后会出现webpack: Compiled successfully的字样,代表我们的代码编译成功。这时我们打开浏览器,输入localhost:8010,出现如图所示的网页,表示我们的第一个Vuejs2.0 +ElementUI工程已经成功运行。 

     

    点击图中的Let’s do it按钮,可以看到右侧有一个提醒消息飘出来,这就是ElementUI中的一个组件。 

    至此一个简单的基于VueJs2.0和ElementUI的前端网站的雏形已经完成了,接下来的时间我会慢慢介绍构建单页面应用的更多方法和细节。

     


    想要整理更多的碎片知识,扫码关注下面的公众号,让我们在哪里接着唠!

    展开全文
  • Element-Ui组件(一)页面布局

    万次阅读 2019-06-03 16:17:05
    Element-Ui组件(一)页面布局 本文参考Element官方文档: http://element-cn.eleme.io/#/zh-CN/component 常用布局 el-row与el-col可搭配实现24格栅格布局,若布局较复杂,可以嵌套使用。 el-container作为布局...

    Element-Ui组件(一)页面布局

    本文参考Element官方文档:

    http://element-cn.eleme.io/#/zh-CN/component

    常用布局
    el-rowel-col可搭配实现24格栅格布局,若布局较复杂,可以嵌套使用。
    el-container作为布局容器(可以嵌套使用),内部可包含el-header(顶栏),el-aside(侧边栏),el-main(内容),el-footer(底栏)。
    页面效果
    页面布局
    示例代码

    <template>
      <el-container>
        <!-- 顶栏 -->
        <el-header height="60px">
          <h2>Element 页面布局</h2>
        </el-header>
        <!-- 嵌套容器 -->
        <el-container>
          <!-- 侧边导航菜单 -->
          <el-aside width="150px"></el-aside>
          <!-- 内容 -->
          <el-main>
            <!-- 第一列栅格布局 -->
            <el-row>
              <el-col :span="12" class="col1"></el-col>
              <el-col :span="12" class="col2"></el-col>
            </el-row>
            <!-- 第二列布局 -->
            <el-row>
              <el-col :span="24" class="col3"></el-col>
            </el-row>
          </el-main>
        </el-container>
        <!-- 底栏 -->
        <el-footer height="30px">&copy;究极死胖兽 2019</el-footer>
      </el-container>
    </template>
    
    <script>
    export default {
    }
    </script>
    
    <style>
    .el-header {
      background-color: #409EFF;
      color: white;
    }
    .el-footer {
      background-color: #909399;
      color: black;
      text-align: center;
    }
    .el-aside {
      background-color: chartreuse;
    }
    .el-main {
      background-color: darkkhaki;
    }
    .el-col {
      height: 200px;
    }
    .col1 {
      background-color: teal;
    }
    .col2 {
      background-color: tomato;
    }
    .col3 {
      background-color: thistle;
    }
    </style>
    

    el-row 属性:

    参数 类型 说明 可选值 默认值
    gutter 栅格间隔 number 0
    type 布局模式,可选 flex,现代浏览器下有效 string
    justify flex 布局下的水平排列方式 string start/end/center/space-around/space-between start
    align flex 布局下的垂直排列方式 string top/middle/bottom top
    tag 自定义元素标签 string * div

    el-col 属性:

    参数 类型 说明 可选值 默认值
    span 栅格占据的列数 number 24
    offset 栅格左侧的间隔格数 number 0
    push 栅格向右移动格数 number 0
    pull 栅格向左移动格数 number 0
    xs <768px 响应式栅格数或者栅格属性对象 number/object (例如: {span: 4, offset: 4})
    sm ≥768px 响应式栅格数或者栅格属性对象 number/object (例如: {span: 4, offset: 4})
    md ≥992px 响应式栅格数或者栅格属性对象 number/object (例如: {span: 4, offset: 4})
    lg ≥1200px 响应式栅格数或者栅格属性对象 number/object (例如: {span: 4, offset: 4})
    xl ≥1920px 响应式栅格数或者栅格属性对象 number/object (例如: {span: 4, offset: 4})
    tag 自定义元素标签 string * div

    el-container属性:

    参数 类型 说明 可选值 默认值
    direction 子元素的排列方向 string horizontal / vertical 子元素中有 el-header 或 el-footer 时为 vertical,否则为 horizontal

    el-header属性:

    参数 类型 说明 可选值 默认值
    height 顶栏高度 string 60px

    el-aside 属性:

    参数 类型 说明 可选值 默认值
    width 侧边栏宽度 string 300px

    el-footer属性:

    参数 类型 说明 可选值 默认值
    height 底栏高度 string 60px
    展开全文
  • ElementUI快速入门

    万次阅读 多人点赞 2019-01-04 10:39:22
    本文主要从几个方面快速入门ElementUI 1、什么是ElementUI ? 掌握elementUI脚手架搭建 2、掌握elementUI的table组件的使用,实现列表功能 3、掌握elementUI的pagination组件的使用,实现分页功能 ...

    本文主要从几个方面快速入门ElementUI

    1、什么是ElementUI ? 掌握elementUI脚手架搭建

    2、掌握elementUI的table组件的使用,实现列表功能

    3、掌握elementUI的pagination组件的使用,实现分页功能

    4、掌握elementUI的form相关组件的使用,实现条件查询功能

    5、掌握elementUI的dialog组件和$message的使用,实现弹出窗口和消息提示功能

    6、掌握elementUI的select组件的使用,实现下拉列表功能实现新增数据和修改数据的功能

    7、掌握confirm的使用,实现询问框,实现删除功能

     

    1、什么是ElementUI?

    Element 饿了么前端出品的一套 基于 Vue 2.0 的桌面端组件库

    官网: http://element.eleme.io/#/zh-CN

     

    1.1、搭建elementUI脚手架(vue-admin-template)

    # Clone project
    git clone https://github.com/PanJiaChen/vue-admin-template.git
    
    # Install dependencies
    npm install
    
    # Serve with hot reload at localhost:9528
    npm run dev
    
    # Build for production with minification
    npm run build
    
    # Build for production and view the bundle analyzer report
    npm run build --report

    在执行完npm run dev后发现浏览器自动打开了vue-admin-template登录页面,点击登录,此时模板页面就搭建好了。

    打开文件夹vue-admin-template,主要的目录结构如下图所示:

     

    1.2 项目初始化调整

    1.2.1  关闭语法规范性检查

    修改config/index.js ,将useEslint的值改为false。

    此配置作用: 是否开启语法检查,语法检查是通过ESLint 来实现的。

    我们现在科普一下,什么是ESLint : ESLint 是一个语法规则和代码风格的检查工具,可以用来保证写出语法正确、风格统一的代码。如果我们开启了Eslint , 也就意味着要接受它非常苛刻的语法检查,包括空格不能少些或多些,必须单引不能双引,语句后不可以写 分号等等,这些规则其实是可以设置的。作为初学者,最好先关闭这种校验,否则会浪费很多精力在语法的规范性上。如果以后做真正的企业级开发,建议开启。

     

    1.2.2  国际化设置

    打开main.js 找到这句代码

    import locale from 'element‐ui/lib/locale/lang/en'

    我们将en修改为zn-CN
    import locale from 'element‐ui/lib/locale/lang/zh‐CN'

    修改后组件都是按照中文的习惯展示

     

    1.2.3  与easy-mock对接

    (1)修改config下的dev.env.js中的BASE_API为easy-mock的Base URL

      ....
      BASE_API: '"http://10.211.5.3:7300/mock/5af314a4c612420d0d7650c7"',
      ....
    

    修改后发现无法登录上vue-admin-templates,原因是修改了BASE_API,需要在自己的Easy-mock中修改验证

    (2)easy-mock添加登陆认证模拟数据 地址: /user/login
    提交方式:post
    内容:

    {
      "code": 20000,
      "data": {
        "roles": ["admin"],
        "role": ["admin"],
        "name": "admin",
        "avatar": "https://wpimg.wallstcn.com/f778738c‐e4f8‐4870‐b634‐56703b4acafe.gif"
      }
    }

    (3)添加返回用户信息url模拟数据 地址:/user/info
    提交方式:get
    内容:

    {
      "code": 20000,
      "data": {
        "roles": ["admin"],
        "role": ["admin"],
        "name": "admin",
        "avatar": "https://wpimg.wallstcn.com/f778738c‐e4f8‐4870‐b634‐56703b4acafe.gif"
      }
    }

     

    此时又可以登录上vue-admin-template,且成功与自己的easy-mock对接上了。

     

    2.elementUI的table组件,实现列表展示

    (1)在src/api/下创建gathering.js,书写代码:

    import request from '@/utils/request'
    export default{
        getList(){
            return request(
                {
                    url:'/gathering/gathering',
                    method:'get'
                } 
            );
        }
    } 

    导入request模块实际上是对ajax的封装(在utils/request.js中),上述的url和method即为请求的url和method

    (2)在views/table中创建 gathering.vue

    vue主要分为视图区<template>、逻辑区/代码区<script>(用于控制视图区的显示)

    <template>
        <el-table :data="list" border style="width: 100%">
        <el-table-column prop="id" label="活动ID" width="180">
        </el-table-column>
        <el-table-column prop="name" label="活动名称" width="180">
        </el-table-column>
        <el-table-column prop="sponsor" label="主办方" width="180">
        </el-table-column>
        <el-table-column prop="address" label="活动地址" width="180">
        </el-table-column>
        <el-table-column prop="starttime" label="开始日期" width="180">
        </el-table-column>
        <el-table-column prop="endtime" label="结束日期" width="180">
        </el-table-column>
      </el-table>
    </template>
    
    <script>
    //将我们刚才书写的gathering.js导入到该vue中,并声明其作为变量gatheringApi
    import gatheringApi from '@/api/gathering'
    export default {
        data() {
        return {
          list: []
        }
      },
      created() {
        this.fetchData()
      },
      methods: {
        fetchData() {
          gatheringApi.getList().then(response => {
            this.list = response.data
          })
        }
      }
    }
    </script>

    (3)修改router/index.js中的path和import('@/views/table/gathering')  其中path为访问路径,import为views文件夹中的table文件夹中的gathering.vue文件

    {
        path: '/gathering',
        component: Layout,
        children: [
          {
            path: 'index',
            name: 'Form',
            component: () => import('@/views/table/gathering'),
            meta: { title: '活动管理', icon: 'form' }
          }
        ]
      }

    (4)reload工程 :   npm run dev

    (5)plus:如果此时你在开发者工具中能正常接收数据,但是无法显示,考虑easy-mock中的接口设置,返回值是否为20000等。

    {
        "code": 20000,
        "flag": true,
        "message": "@string",
        "data|10": [{
          "id": "@string",
          "name": "@cword(8,12)",
          "summary": "@cword(20,40)",
          "detail": "@cword(20,40)",
          "sponsor": "@string",
          "image": "@image",
          "starttime": "@date",
          "endtime": "@date",
          "address": "@county(true)",
          "enrolltime": "@date",
          "state": "@string",
          "city": "@string"
        }]
    }

     

    3.使用pagination实现分页

    我们已经通过表格组件完成了列表的展示,接下来需要使用分页组件完成分页功能

    一般对于分页,都需要前端传递给后端两个参数:①当前页码   ②每页显示条数

    由于笔者项目中用到了Easy Mock,所以我们第一步应该修改Easy Mock中的接口,产生更真实的模拟数据

    (1)修改接口/gathering/gathering/search/{page}/{size} method:POST

    (2)在gathering.js中添加新方法search,page当前页码,size每页显示条数,searchMap查询条件

    参考返回数据结构:

    <script>
    import gatheringApi from '@/api/gathering'
    export default {
        data() {
        return {
          total: 0 ,       //总记录数
          list: [],
          currentPage: 1,  //初始值为1
          pageSize: 10,     //每页显示条数
          searchMap: {}     //查询条件
        }
      },
      created() {
        this.fetchData()
      },
      methods: {
        fetchData() {
          gatheringApi.search(this.currentPage,this.pageSize,this.searchMap).then(response => {
            this.list = response.data.rows
            this.total = response.data.total
          })
        }
      }
    }
    </script>

    此时js部分(逻辑处理层)我们已经完成,参考官方文档完成分页组件UI层:

    http://element-cn.eleme.io/#/zh-CN/component/pagination

    plus:@代表调用的方法,当每页显示个数和当前页码改变时会调用方法fetchData,:name代表属性

      <el-pagination
          @size-change="fetchData"
          @current-change="fetchData"
          :current-page="currentPage"
          :page-sizes="[5, 10, 20]"
          :page-size="10"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
      </el-pagination>

    plus:如果加入该<el-pagination>到<template>中报错,考虑在<template>下添加一个<div>标签,因为<template>下只能有一个标签加入后即只有一个<div>标签,否则将存在<el-table>标签和<el-pagination>标签,故报错。

     

    4. 使用分页+条件查询

    需求:在分页列表的基础上实现条件查询功能【使用到了表单控件、文本输入控件、日期输入控件、行内表单等】

    总体template代码:

    <template>
      <div>
        <br/>
        <el-form :inline="true">
          <el-form-item label="活动名称">
            <el-input v-model="searchMap.name"></el-input>   
          </el-form-item>
          <el-form-item label="活动日期">
            <el-date-picker v-model="searchMap.starttime_1" type="date" placeholder="选择开始日期">
          </el-date-picker>
            <el-date-picker v-model="searchMap.starttime_2" type="date" placeholder="选择结束日期">
          </el-date-picker>
          </el-form-item>
          <el-button @click="fetchData()" type="primary">查询</el-button>
        </el-form>
    
        ......
    
      </div>
    </template>

     

    5-6. 弹出窗口、消息提示、select下拉框

    需求:界面中加入"新增"按钮,点击弹出编辑窗口,点击“修改”按钮,关闭窗口并刷新表格,弹出提示(成功或失败)

    涉及知识点:dialog组件、$message、switch开关、textarea文本域、form表单、select下拉框等

    参考官方文档:http://element-cn.eleme.io/#/zh-CN/component/dialog      (如何调出窗口并关闭窗口)

    plus:注意!需要在return内部声明一个实体对象,用于存储表单数据 ,如:renturn{ pojo:{} }

    (省略了一部分代码)新增city.js,并导出(参考gathering.js)。在gathering.vue中导入city,并在打开视图时就加载城市:

    created() {
        this.fetchData()
        cityApi.getList().then(response => {
          this.cityList = response.data
        })
      }

    不要忘记在return中加入city这个实体对象,否则为空报错。如return{ cityList:[] }

    <template>视图层代码:

    <el-dialog title="编辑" :visible.sync="dialogFormVisible">
        <el-form :model="form" label-width="100px">
        <el-form-item label="活动名称" :label-width="formLabelWidth">
          <el-input v-model="pojo.name" placeholder="活动名称"></el-input>
        </el-form-item>
        <el-form-item label="基本地址" :label-width="formLabelWidth">
          <el-input v-model="pojo.address" placeholder="基本地址"></el-input>
        </el-form-item>
        <el-form-item label="开始日期" :label-width="formLabelWidth">
          <el-date-picker v-model="pojo.starttime" type="date" placeholder="选择开始日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="截至日期" :label-width="formLabelWidth">
          <el-date-picker v-model="pojo.endtime" type="date" placeholder="选择截至日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="报名截止" :label-width="formLabelWidth">
          <el-date-picker v-model="pojo.enrolltime" type="date" placeholder="选择截至日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="活动详情" :label-width="formLabelWidth">
          <el-input v-model="pojo.detail" type="textarea" :rows="3" placeholder="请输入内容"></el-input>
        </el-form-item>
        <el-form-item label="选择城市">
          <el-select v-model="pojo.city" placeholder="请选择城市">
            <el-option v-for="item in cityList" :key="item.value" :label="item.name" :value="item.id">
            </el-option>
        </el-select>
        </el-form-item>
        <el-form-item label="是否可见">
           <el-switch v-model="pojo.status" active-value="1" inactive-value="0" ></el-switch>
        </el-form-item>
        <el-form-item>
           <el-button type="primary">保存</el-button>
           <el-button type="primary" @click="dialogFormVisible = false">关闭</el-button>
        </el-form-item>
      </el-form>
      </el-dialog>

    当我们点击保存按钮的时候,则触发几个动作:①弹出消息提示框(消息内容来自于响应体中的message)  ②判断消息状态是否为true,为true则刷新列表(调用之前的刷新列表方法)  ③关闭窗口(设置dialogVisible = false),主要代码如下:

    <template>
    ...
        <el-form-item>
           <el-button type="primary" @click="handlerSave()">保存</el-button>
           <el-button type="primary" @click="dialogFormVisible = false">关闭</el-button>
        </el-form-item>
    ...
    </template>
    
    <script>
        ...
        methods:{
            handlerSave(){
              gatheringApi.save(this.pojo).then(response => {
              alert(response.message)
              if(response.flag){         //如果成功
              this.fetchData();        //刷新列表
            }
          })
          this.dialogFormVisible=false //关闭窗口
        }
        }
        ...
    </script>

     

    7、在列表显示页面右侧执行修改操作

    需求:在表格的操作列增加"修改"按钮,点击修改按钮弹出窗口并显示数据,点击保存按钮保存 修改并刷新表格。

    需求分析:在点击修改按钮时候,首先需要打开窗口(修改dialogVisible = true),其次获取点击的数据行id,根据该id查询数据并回显,在点击保存按钮时候,执行上面所讲的保存操作。

    由于我们使用Easy-Mock模拟数据,我们首先需要修改根据id查询数据的接口

    (1)修改easymock接口/gathering/gathering/{id} (GET)

    (2)修改src/api/gathering.js,增加方法定义

    findById(id) {
       return request({
          url: `/gathering/gathering/${id}`,
          method: 'get'
       })
    }
    

    (3)修改src/views/table/gathering.vue的js脚本部分,新增handleEdit()方法

    handleEdit(id){
       this.dialogFormVisible=true  //打开窗口
        gatheringApi.findById(id).then(response=>{
          if(response.flag){
            this.pojo=response.data
          }
        })
    }

    (4)在表格table中增加模板列 ,模板列中防止修改按钮,调用handleEdit方法

    <el-table-column
          label="操作"
          width="100">
          <template slot-scope="scope">
            <el-button @click="handleEdit(scope.row.id)" type="text" size="small">修改</el-button>
          </template>
    </el-table-column>

    fixed="right"的作用是定义此列为右固定列slot-scope用于指定当前行的上下文。

    使用scope.row可以获取行对象,此处我们需要获得当前行的id,故使用scope.row.id

     

    展开全文
  • elementUI简单应用以及nodeJs配置

    千次阅读 2019-08-05 21:48:43
    elementUI的简单应用 ElementUI简介: 我们学习VUE,知道它的... 所以饿了吗推出了基于VUE2.0的组件库,它的名称叫做element-ui,提供了丰富的PC端组件 Vue+ElementUI安装: 2.1 CDN方式 <!-- 1. 导入css --...
  • Element-UI使用

    千次阅读 2019-03-15 08:51:28
    Element-UI使用指南 官方中文:http://element.eleme.io/#/zh-CN Element-UI是饿了么前端团队推出的一款基于Vue.js 2.0的桌面端UI框架,手机端有对应框架是Mint UI。 开发环境 1.安装webpack npm install...
  • element-ui中el-container容器与div布局区分

    万次阅读 热门讨论 2019-04-24 13:37:18
    用于布局的容器组件,方便快速搭建页面的基本结构: el-container:外层容器。当子元素中包含 或 时,全部子元素会垂直上下排列,...以上组件采用了 flex 布局,elemen-ui官方文档链接: http://element-cn.elem...
  • vue和element-ui使用

    万次阅读 多人点赞 2018-07-06 14:39:32
    这一篇主要是创建一个vue项目并结合饿了么框架element-ui。1.先创建vue项目,我准备把项目放在e盘下:E:\Work\RegisterProject;命令行进入这个目录:创建一个基于 webpack 模板的新项目(1)vue init webpack ...
  • Element-UI使用指南

    万次阅读 多人点赞 2016-11-04 09:23:31
    Element-UI使用指南 Element-UI是饿了么前端团队推出的一款基于Vue.js 2.0 的桌面端UI框架,手机端有对应框架是 Mint UI 。 开发环境1.安装webpacknpm install -g webpack2.安装vue-clivue-cli是什么?vue-cli 是...
  • element-ui使用总结

    千次阅读 2019-04-29 15:01:42
    1.input输入框 自定义图标 前部效果图: &amp;amp;amp;amp;amp;amp;lt;el-input type=&amp;amp;amp;amp;amp;quot;text&amp;amp;amp;amp;amp;quot; v-model=&amp;amp;amp;amp;...
  • Vue 中 安装 element-ui 的步骤

    万次阅读 多人点赞 2018-04-26 19:23:11
    1. 在项目下 输入 npm install element-ui -S2.查看配置文件package.json,是否有element-ui组件的版本号 如下图:3.安装成功后 ,在node_modules中可以看到 element-ui的文件夹 ,所有安装的源文件可以在这里面...
  • Element UI 官网地址

    万次阅读 2018-09-30 10:20:08
    Element UI 官网地址
  • element-ui引入css存在的问题

    万次阅读 2018-05-24 09:30:26
    正常我们用vue-cli开发项目,可选择的插件很多,例如vux、iview、element-ui等等今天说下element-ui的安装以及使用命令行安装:npm i element-ui -S然后在main的js中...import 'element-ui/lib/theme-default/ind...
  • 4、electron-vue安装element-ui

    万次阅读 2018-03-26 12:29:37
    Element UI 是一套采用 Vue 2.0 作为基础框架实现的组件库,它面向企业级的后台应用,能够帮助你快速地搭建网站,极大地减少研发的人力与时间成本,具体用法请参考Element UI yarn add element-ui // 或 cnpm ...
  • 环境说明 Windows 10 WebStorm 2017.3 Node.js 8.9.4 Npm 5.5.1 Vue 2.5.13 Element UI 2.0.11 问题说明 引入Element-UI后,在项目中使用: ... import Element from 'element-ui' import 'ele
  • 在项目中自定义路径引入element-ui并自定义修改element-ui源码后编译使用
  • 基础搭建vue-cli,并在cli中安装element ui 插件 配合开发教程以及遇到的坑
  • 在vue项目中升级更新element ui版本

    万次阅读 2019-07-03 17:05:27
    一、升级element-ui需要先卸载原先的版本,在cmd中输入npm uninstall element-ui 二、然后重新安装element-uinpm i element-ui -S 三、最后在main.js中把default修改为theme-chalk ...
  • vue+element ui 表格超链接跳转

    万次阅读 2018-09-07 14:34:48
    别人写的&lt;a&gt;&lt;/a&gt;标签跳转 链接:https://blog.csdn.net/caimaomaocai/article/details/81334641 我加入按钮跳转 并传参 不会用vue,总结前人的经验。...希望越来越好...
  • element-ui移动端rem适配

    万次阅读 2018-10-09 17:18:25
    https://segmentfault.com/a/1190000015238394
1 2 3 4 5 ... 20
收藏数 99,193
精华内容 39,677
关键字:

element ui