精华内容
下载资源
问答
  • vue项目更新element-ui版本

    千次阅读 2020-04-10 13:22:56
    一、升级element-ui需要先卸载原先的版本,在cmd中输入 npm uninstall element-ui 二、然后重新安装element-ui npm i element-ui -S
    一、升级element-ui需要先卸载原先的版本,在cmd中输入 
    npm uninstall element-ui
    二、然后重新安装element-ui 
    npm i element-ui -S

     

    展开全文
  • 在vue项目中升级更新element ui版本

    万次阅读 2019-03-03 21:17:40
    一、升级element-ui需要先卸载原先的版本,在cmd中输入npm uninstall element-ui 二、然后重新安装element-uinpm i element-ui -S 三、最后在main.js中把default修改为theme-chalk ...

    一、升级element-ui需要先卸载原先的版本,在cmd中输入 
    npm uninstall element-ui

    二、然后重新安装element-ui 
    npm i element-ui -S

    三、最后在main.js中把default修改为theme-chalk

    展开全文
  • 如何在已有的项目更新项目的插件,不少刚入门的人一头雾水,本文档提供三步式解决方案,一看就懂。
  • 简介Element,一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库,基于MIT协议。目前github star 数为38k+, 是一款非常热门的桌面端组件库。对于前端开发的朋友们Element既有基于vue版本的组件库,...

    简介

    Element,一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库,基于MIT协议。目前github star 数为38k+, 是一款非常热门的桌面端组件库。对于前端开发的朋友们Element既有基于vue版本的组件库,也有基于angular版本的组件库,当前前端开发"三国鼎立"的时刻,Element 可以说是非常值得好好学习的一个桌面端组件库。

    官网截图

    7077e01659835cf196e18535d9cbba3a.png

    2.11.0 版本更新

    新特性

    • Drawer
    • 新增抽屉组件 (#16577 by @JeremyWuuuuu)

    Bug 修复

    • Checkbox
    • 修复 CSS 样式问题 (#16006 by @Hazlank)
    • Tree
    • 更新类型定义为泛类型 (#15934 by @JeremyWuuuuu)
    • 修复设置节点 isCurrent 的为 false 的问题 (#15870 by @kkkisme)
    • Dropdown
    • 更新 split-button 默认颜色 (#15931 by @JuniorTour)
    • Cascader
    • 修复一级菜单更新问题 (#16399 by @luckyCao)
    • 更新显示正确的 header 的逻辑 (#16354 by @ziyoung)
    • 懒加载时设默认值 (#16420 by @luckyCao)
    • 修复显示问题 (#15935 by @junyiz)
    • 对外暴露 getCheckedNodes 和修复 option 问题 (#16709 by @SimonaliaChen)
    • Submenu
    • 修复 append-to-body 问题 (#16289 by @a631807682)
    • Table
    • 修复 tree table 数据更新问题 (#16481 by @island205)
    • Select
    • 修复内存泄漏问题 (#16463 by @island205)
    • InfiniteScroll
    • 更新命名和说明 (#16698 by @iamkun)
    • Avatar
    • 修复图片不居中的问题 (#16489 by @luckyCao)
    • Dialog
    • 增加 destroyOnClose 属性 (#16455 by @ziyoung)
    • Image
    • 增加大图预览 (#16333 by @luckyCao)

    优化

    • Docs
    • 修复 dropdown 示例 (#16193 by @webxmsj)
    • 修正笔误 (#15971 by @howiefh)
    • I18n
    • 更新泰文翻译 (#16689 by @ponkrit)
    • Chore
    • 更新基础 API 地址 (#16607 by @iamkun)
    • 增加 Form 的主题 token (#16699 by @iamkun)
    • 更新统计 (#16609 by @iamkun)
    • 修复文档锚点问题 (#16692 by @iamkun)

    本地开发

    • 安装
    # 推荐使用 npm 的方式安装,它能更好地和 webpack 打包工具配合使用。npm i element-ui -S
    • 快速上手
    • 完整引入
    import Vue from 'vue';import ElementUI from 'element-ui';import 'element-ui/lib/theme-chalk/index.css';import App from './App.vue';Vue.use(ElementUI);new Vue({ el: '#app', render: h => h(App)});
    • 通过 CDN 引入

    目前可以通过 unpkg.com/element-ui 获取到最新版本的资源,在页面上引入 js 和 css 文件即可开始使用。

    • 自动按需引入组件 (推荐)

    babel-plugin-import 是一款 babel 插件,它会在编译过程中将 import 的写法自动转换为按需引入的方式。

    # 安装插件npm i babel-plugin-import -D// 在.babelrc 中添加配置{ "presets": [["es2015
    展开全文
  • { 走表单数据提交操作 } 11.13 记录 element-Menu 专区 如何优雅的实现选中区域 :default-active="activeMenu" computed(){ activeMenu() { const route = this.$route const { meta, path } = route // if set path...

    10.17记录

    el-timeline专区

    实现功能:大环节嵌套小环节。若小环节只有一条数据,则不竖线显示。小环节最后一条数据,也不显示竖线

     <el-timeline>
              <el-timeline-item v-for="(activity, index) in outWrapList" :key="index" :timestamp="activity.Name" placement="top">
                <!-- {{outWrapList}} -->
                <el-timeline-item
                  class="in-wrap"
                  v-for="(activitySub, indexSub) in activity.Proof"
                  :key="indexSub"
                  :timestamp="activitySub.Title"
                  placement="top"
                  :class="{'nolast-lineTwo': outWrapList.length === index + 1, 'nolast-line': activity.Proof.length === indexSub + 1 && outWrapList.length === index + 1}"
                >
                  <div v-if="activitySub.Type === 2" class="pic-preview">
                    <li v-for="(itemS, indexS) in activitySub.List" :key="indexS">
                      <img :src="itemS.url" alt />
                    </li>
                  </div>
                  <li v-else>{{ activitySub.Content }}</li>
                </el-timeline-item>
              </el-timeline-item>
            </el-timeline>
    

    先来说说el-timeline 他是做了处理的,但是是针对,只有一条环节。会把最后一条线display:none

    解决: 通过索引。添加类名。增加或者去掉线
    :class="{'nolast-lineTwo': outWrapList.length === index + 1, 'nolast-line': activity.Proof.length === indexSub + 1 && outWrapList.length === index + 1}"

    .nolast-lineTwo {
        /deep/ .el-timeline-item__tail {
          display: block !important ;
        }
      }
      .nolast-line {
        /deep/ .el-timeline-item__tail {
          display: none !important ;
        }
      }
    

    在这里插入图片描述

    10.19记录

    el-table专区

    1. 修改表头样式
     <el-table
            :header-cell-style="{ background: '#e4e6ed' }"
            :data="reviewList"
            style="width: 98%"
            stripe
          >
    

    在这里插入图片描述

    1. 修改间隔样式
      可能你会用 stripe 属性 来设置斑马效果。但是如果需求是将斑马颜色奇数偶数变化位置。或者自定义斑马颜色 :row-class-name="tableRowClassName"
     <el-table
            :header-cell-style="{background:'#fff'}"
            :data="recodeList"
            border
            style="width:98%"
            :row-class-name="tableRowClassName"
          >
    

    tableRowClassName 是一个事件

       tableRowClassName ({ row, rowIndex }) {
          if (rowIndex % 2 === 0) {
            return 'success-row'  // 代表偶数行 要显示的样式类
          } else {
            return 'normal-row' // // 代表基数行 要显示的样式类
          }
        }
    
     /deep/ .el-table .success-row {
        background: #f6f8fb;
      }
      /deep/ .el-table .normal-row {
      background: #fff;
    }
    
    1. 多数据表单验证
      在这里插入图片描述
      思路:
      (1) 对表单的所有引用,进行校验(通过返回true,不通过返回false)。将校验的结果放到一个数组。
      (2) 对数组的每一项,进行every

    every() 方法使用指定函数检测数组中的所有元素:
    如果数组中检测到有一个元素不满足,则整个表达式返回 false ,且剩余的元素不会再进行检测。
    如果所有元素都满足条件,则返回 true。
    注意: every() 不会对空数组进行检测。
    注意: every() 不会改变原始数组。

    (3)如果所有元素都校验通过,则都会返回true,那么通过every校验,返回的也是true
    。此时,才可以进行下面的表单提交操作
    代码

     const newArr = []
            for (var v = 0; v < this.$refs.ruleAddFormRef.length; v++) {
              this.$refs.ruleAddFormRef[v].validate(async (valid) => {
                if (valid) {
                  newArr.push(true)
                } else {
                  newArr.push(false)
                }
              })
            }
           
              this.flag = newArr.every((val) => {
                return val === true
              })
            }
          }
          if (this.flag) {
                   走表单数据提交操作
          }
    

    11.13 记录 element-Menu 专区

    1. 如何优雅的实现选中区域
    :default-active="activeMenu"
    computed(){
      activeMenu() {
          const route = this.$route
          const { meta, path } = route
          // if set path, the sidebar will highlight the path you set
          if (meta.activeMenu) {
            return meta.activeMenu
          }
          return path
        }
    }
    ,
     {
            path: 'edit/:fileName(\\w+)',
            component: () => import('@/views/book/edit'),
            name: 'EditBook',
            meta: { title: '编辑图书', noCache: true, activeMenu: '/book/list' },
            hidden: true
          }
    

    12.5记录

    修改element 表格的某一列的样式

     <el-table
              :header-cell-style="{
                background: '#eef1f6',
                borderTop: '1px solid #333',
                borderRight: '1px solid #333',
                borderBottom: '1px solid #333',
              }"
              :cell-style="changeCellStyle"
              @sort-change="changeSort"
              :default-sort="{ prop: 'absLastRate', order: 'descending' }"
              :data="tableData"
              border
              style="width: 80%"
            >
              <el-table-column
                class="table_left"
                sortable
                prop="symbol"
                label="交易所"
                width="180"
              >
                <template slot-scope="scope">
                  <div class="left_sty">
                    <span>{{ scope.row.exchangeName }}</span>
                  </div>
                </template>
              </el-table-column>
              <el-table-column
                sortable
                prop="symbolName"
                label="币对(%)"
                width="180"
              >
                <template slot-scope="scope">
                  <a
                    :href="scope.row.symbolFutureHref"
                    style="text-decoration: none"
                    target="_blank"
                  >
                    <span>{{ scope.row.symbolName }}</span>
                  </a>
                </template>
              </el-table-column>
              
    
    changeCellStyle(row, column, rowIndex, columnIndex) {
          console.log(row, column, rowIndex, columnIndex);
          // 列的label的名称
          if (row.column.label === "交易所") {
            return "background: #eef1f6;fontWeight:800"; // 修改的样式
          } else {
            return "";
          }
        },
    

    直接在行内写也可以。。。

    展开全文
  • 备注: 本文编写了与在vue项目引用element UI相关的一些知识,仅供参考,描述不当的地方,请评论指正 状态:已完成、待补充2019-08-08 [TOC] 快速抵达: 安装 Element-UI 模块; element某些组件渲染不出来 ...
  • .el-table__header tr, .el-table__header th { padding: 0; height: 40px; } .el-table__body tr, .el-table__body td { padding: 0; height: 40px;...修改element ui table tr th高度
  • 安装完成后,我们打开项目src目录下的main.js,引入element-ui依赖。 import Element from 'element-ui' import "element-ui/lib/theme-chalk/index.css" 在全局写入下面代码就可以使用element-ui的组件了 Vue.use...
  • 当您更新/删除条目,移动结构或更新或应用项目配置时,无论您如何访问数据(Element API / GraphQL / other),都可以关闭Craft CMS缓存。 您是否曾经想过在Element API上使用缓存,但是注意到缓存从未被清除? ...
  • ElemnetUI 项目更新 vue-element-extends 1.1 版本时报错: Unknown custom element: <el-editable> - did you register the component correctly? For recursive components, make sure to provide the ...
  • 首先卸载项目中的element-ui 命令为: npm uninstall element-ui 安装更新最新的element-ui 命令为 npm i element-ui -S (更新想要安装的版本命令为npm install element-ui @2.0.11 -S) 转载于:...
  • 如何在vue-cli中更新element-ui的版本

    千次阅读 2019-05-13 14:58:01
    如何在vue-cli中更新element-ui的版本 之前搭建项目的时候element-ui是2.7.2,今天发现element-ui升级到了2.8.2. 第一步:需要先卸载原来的element-ui npm uninstall element-ui 第二步:npm下载最新版本的element-...
  • 验证信息不能直接写在message里,写在自定义规则中 let validateCode = (rule, value, callback) => { if (!value) { return callback(new Error(this.$t('common.validateCode'))) } else { ...
  • 请使用 ,它将跟上主更新 当前版本是基于vue-cli v4.0+ 。 如果发现问题,请输入。 如果要使用旧版本,可以将分支切换到 ,它不依赖vue-cli 该项目不支持低版本浏览器(例如IE)。 请自行添加polyfill。 准备 您...
  • 如何升级vue项目中的element-ui的版本

    千次阅读 2020-07-11 20:37:36
    1.首先卸载项目中的element-ui 命令为: npm uninstall element-ui 2.安装更新最新的element-ui 命令为: npm i element-ui -S 3.遇到的坑: 报错: Module build failed: Error: ENOENT: no such file or ...
  • 这个博客主要是上一个项目的心得体会,文章很长,还没有写完,每日更新一部分,关注方便查看后续 本次项目使用的主要框架是:Spring Boot + Mybatis + Vue + Element Ui 一、Spring Boot(环境配置,以及重难点) 1...
  • 后续需要什么再更新 以下说的安装均是在当前项目的目录下进行的。 一、element ui 首先安装element ui npm i element-ui -S 然后再接着复制以下三行代码就可以了 //引入element ui import ElementUI from '...
  • Vue、Element-ui项目中如何使用Iconfont(阿里图标库)

    万次阅读 多人点赞 2018-03-29 13:45:42
    我们使用element-ui、vue开发网站的时候,往往图标是起着很重要的作用。 2018-11-9更新 1.傻瓜式引用:由于这种方法及其简单 省去了很多繁琐的步骤, a.引入项目生成的,图标地址。 b.使用推荐使用这种,详情请...
  • 在实际项目中,遇到了这样一个需求。需要做一个依赖于外部省分信息的市、区联动cascade。 省份信息是从外部传入的,是会动态变化的。根据这个省份信息,实现市、区联动,市、区信息是通过Lazy方式获取到的。 在...
  • <div><p>每次增加删除childern,都要手动重新计算Element的count,很麻烦</p><p>该提问来源于开源项目:livoras/simple-virtual-dom</p></div>

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 532
精华内容 212
关键字:

更新项目element