精华内容
下载资源
问答
  • 主要介绍了vue element 关闭当前tab 跳转到上一路由操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • Element UI 完整版 源码 可用 vue+Element-UI 前端框架
  • 主要介绍了vue Element左侧无限级菜单实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • 主要为大家详细介绍了vue element-ui实现动态面包屑导航,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 这是一款基于 Vue / Vuex / VueRouter / axios / ElementUI 等等而成的简单管理后台模板
  • 基于vue element的金额格式化组件
  • Spring Boot Vue Element入门实战(完结)

    万次阅读 多人点赞 2019-04-23 13:03:03
    最近在自学VUE,发现这个前端框架很火,他和传统的Jquery 编程思路完全不一样,Jquery 是事件驱动的,而VUE是数据驱动的。以前写页面经常是通过Jquery 操作各种DOM,而VUE不用对DOM...Spring Boot Vue Element入门...
    展开全文
  • 主要介绍了vue+element实现打印页面功能,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值 ,需要的朋友可以参考下
  • Vue Element入门教程

    千次阅读 2019-03-05 10:07:05
    之前的文章已经为大家讲解了如何搭建Vue Element框架,接下来教大家试着自己编写一个自己的页面。 这个页面所对应的代码,为src目录下的App.vue文件,我们先把显示图片和按钮这几行行注释掉。 注意:不能注释掉 &...

    首先我们来看一下文件的目录结构:
    在这里插入图片描述
    其中node_modules是你安装的依赖,也就是你执行完npm install命令安装的东西;assets可以存放一些公共的样式、图标等;components里放的是你写的组件;router放的是页面的路由;views里可以放你自己写的一些页面;App.vue是页面的入口;main.js是js文件的入口,你需要在这里面把你写的js引进去;static可以放一些图片、图标等。

    之前的文章已经为大家讲解了如何搭建Vue Element框架,接下来教大家试着自己编写一个自己的页面。
    在这里插入图片描述

    • 这个页面所对应的代码,为src目录下的App.vue文件,我们先把显示图片和按钮这几行行注释掉。
      注意:不能注释掉 <router-view></router-view>这一行。
    <template>
    <!-- <img src="./assets/logo.png">
    <div>
      <el-button @click="startHacking">Start</el-button>
    </div> -->
        <router-view></router-view>
      </div>
    </template>
    
    <script>
    export default {
      methods: {
        startHacking () {
          this.$notify({
            title: 'It works!',
            type: 'success',
            message: 'We\'ve laid the ground work for you. It\'s time for you to build something epic!',
            duration: 5000
          })
        }
      }
    }
    </script>
    
    <style>
    #app {
      font-family: Helvetica, sans-serif;
      text-align: center;
    }
    </style>
    
    • src目录下新建一个views文件夹,views文件夹里建立一个Login文件夹,再在Login文件夹里建一个Index.vue文件。
      代码如下所示:
       <template>
          <div id='app'>
             Hello Vue!
          </div>    
        </template>
        
        <script>
        export default {
        }
        </script>
        
        <style>
        </style>``
    
    • src目录下建一个router文件夹,再在router文件夹里建一个routes.js文件。
      代码如下所示:
         import Vue from "vue"
         import Login from"../views/Login/Index.vue"
         inport  Router from "vue-router"
         
         Vue.use(Router)
         //路由配置
            let routes = [
                          {path:'/login',
                           component:Login,
                           name:"登录页",
                           hidden:true},
                        ]
            const router = new Router({
               routes,
               mode:'history'
              })
             export default router
       
    
    
    • 在src根目录下修改一下main.js文件:
        import Vue from 'vue'
        import ElementUI from 'element-ui'
        import 'element-ui/lib/theme-chalk/index.css'
        import App from './App.vue'
        import router from './router/routes.js'
    
        //定义路由组件
       
        Vue.use(ElementUI)
        //定义路由
        new Vue({
          router,
          el: '#app',
          render: h => h(App)
        
        })
    
    
    
    • 进入element-starter文件夹,打开命令行界面,执行下面命令安装一下路由。
        npm install vue-router --save
    
    • 执行
        npm run dev
    

    执行完以后,在浏览器输入 http://127.0.0.1:8010/login, 会看到如下的界面:
    在这里插入图片描述

    展开全文
  • vue element计算表格合计问题

    千次阅读 2019-08-15 11:42:34
    vue element计算表格合计问题 问题:当表格的el-table-column标签下的属性prop属性值为‘对象.属性’时,将不能自动合计。 例如: <el-table border v-loading="loading2" element-loading-text="拼命加载中...

    vue element计算表格合计问题


    问题:当表格的el-table-column标签下的属性prop属性值为‘对象.属性’时,将不能自动合计。
    例如:

     <el-table
                border
                v-loading="loading2"
                element-loading-text="拼命加载中"
                element-loading-spinner="el-icon-loading"
                element-loading-background="rgba(255, 255, 255, 0.8)"
                ref="multipleTable"
                :data="dataBill"
                tooltip-effect="dark"
                style="width: 100%;text-align:left;"
                show-summary
                height="720"
              >
                <el-table-column type="index" label="序号" width="90" align="center"></el-table-column>
                <el-table-column prop="statisticsDate" label="日期" align="center"></el-table-column>
                <el-table-column prop="order.count" label="订单数量" align="center"></el-table-column>
                <el-table-column prop="order.total" label="合计金额" align="center"></el-table-column>
              </el-table>
    
    这里的订单数量和合计金额将不能自动合计。
    

    解决思路:把 porp属性值修改为属性格式(prop:“count”)。怎么修改呢????
    实现方法:遍历循环修改。具体如下

    	for (var i = 0; i < data.length; i++) {
                data[i].orderCount = data[i].order.count;
                data[i].orderTotal =
                  data[i].order.total;
              }
    

    最后把订单数量和合计金额的 prop修改如下,就能自动合计啦

    
                <el-table-column prop="orderCount" label="订单数量" align="center"></el-table-column>
                <el-table-column prop="orderTotal" label="合计金额" align="center"></el-table-column>
              
    

    在这里插入图片描述
    转载请注明原地址:https://blog.csdn.net/weixin_42857055/article/details/99624826

    展开全文
  • vue element-ui table中图片的显示

    千次阅读 2019-12-06 16:25:38
    实现如下图片展示效果: ...页面:html/vue <el-table :data="tableData" border style="width: 100%;margin-top:20px;"> <el-table-column prop="picture" label="头像" align="center"> ...

    实现如下图片展示效果:

    这里写图片描述

    页面:html/vue

    <el-table :data="tableData" border style="width: 100%;margin-top:20px;">
                        <el-table-column prop="picture" label="头像" align="center">
                            <template   slot-scope="scope">            
                                <img :src="scope.row.image"  min-width="70" height="70" />
                            </template>  
                        </el-table-column>
                        <el-table-column prop="name" label="人" align="center"></el-table-column>
                        <el-table-column prop="" label="地址" align="center"></el-table-column>
                       
                    </el-table>

     

    js:

    var app = new Vue({
        el:'#app',
        data:{
             tableData: [{
              image: 'https://gss1.bdstatic.com/-vo3dSag_xI4khGkpoWK1HF6hhy/baike/c0%3Dbaike92%2C5%2C5%2C92%2C30/sign=1a3d82d42f2dd42a4b0409f9625230d0/314e251f95cad1c86a912b9a753e6709c93d5161.jpg',
              name: '王小虎',
              address: '上海市普陀区金沙江路 1518 弄'
            }, {
               image: 'https://gss1.bdstatic.com/-vo3dSag_xI4khGkpoWK1HF6hhy/baike/c0%3Dbaike92%2C5%2C5%2C92%2C30/sign=1a3d82d42f2dd42a4b0409f9625230d0/314e251f95cad1c86a912b9a753e6709c93d5161.jpg',
              name: '王小虎',
              address: '上海市普陀区金沙江路 1517 弄'
            }]
        }
    })

     

    展开全文
  • 今天小编就为大家分享一篇解决vue admin element noCache设置无效的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 主要为大家详细介绍了vue+element表格导出为Excel文件,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • Vue Element Admin接入abp vNext权限

    千次阅读 2019-09-29 04:08:04
    Vue Element Admin是基于vueelement ui开发的后台管理ui,abp vNext是abp新一代微服务框架。本篇将会介绍如何改造Vue Element Admin权限验证并接入abp vNext的微服务权限模块。上篇已经介绍过Vue Element Admin...
  • 组件一:vue-calendar 参考:https://blog.csdn.net/weixin_43023873/article/details/91850497?depth_1-utm_source=distribute.pc_relevant.none-task&utm_source=distribute.pc_relevant.none-task 和 ...
  • Vue element 删除已上传文件

    千次阅读 2020-09-19 17:18:50
    Vue elment中提供了upload 但是未能给出删除错误文件的方法。因此为解决该问题,采用axios 进行删除。 前端代码 handleRemove(file, fileList) { console.log(file.name, fileList); this.$axios.post('/api/...
  • vue element表格合并行数据

    千次阅读 2019-06-13 11:31:26
    vue element表格合并行数据 支持不分页的表格数据,分页的表格数据还有小bug <template> <el-container> <el-main> <el-table :data="tableData" border style="width: 100%" ...
  • vue+element 后台管理通用框架2-------------------------------------- 组件库不同
  • Vue Element UI 的表单居中

    千次阅读 2020-08-24 15:21:34
    Vue Element UI 的表单居中 <style lang="scss" scoped> /deep/ .el-dialog__body { margin: 0 auto; } </style> /deep/ 深度选择器 在vue中,为了避免父组件的样式影响到子组件的样式,会在style中加...
  • 毕业设计项目-个人博客。前端基于VueElement-UI和Vue-Element-Admin实现,后台采用SpringBoot+MybatisPlus+Rdis等技术实现。
  • Vue Element图标不显示问题!

    千次阅读 2019-08-17 11:19:23
    解决: 1、在build/utils.js下找到加上 :publicPath: '../../' if (options.extract) { return ExtractTextPlugin.extract({ ... fallback: 'vue-style-loader', publicPath: '../../' //...
  • 基于最新的vue开发堆栈,并且具有内置的i18n解决方案,企业应用程序的典型模板以及许多出色的功能。 它可以帮助您构建大型而复杂的单页应用程序。 我相信无论您有什么需求,该项目都将为您提供帮助。 国内用户可...
  • vue element-ui实现表格选中改变颜色

    千次阅读 2020-06-30 13:33:39
    这两天遇到一个需求,表格自带的选中颜色太过于浅显,看不清楚,需要改变其内部样式 搜索了一下,有很多,找了一个简单的操作 样式如下: ...<el-tabl border highlight-current-row :cell-style="{textAlign:'...
  • Vue Element + vue-treeselect 树形选择列表

    千次阅读 2020-03-25 23:19:28
    本示例以 Vue Element Admin 项目为基础,介绍 Vue Treeselect 控件 npm 安装 vue-treeselect npm install --save @riophae/vue-treeselect 1、/src/views/demo/vue-tree-select.vue <template> &l...
  • Vue element-ui 实现单选列表

    千次阅读 2019-05-16 10:21:05
    element-ui组件强大,但是使用时发现少了一个最常见的组件:单选列表。 我的概念中的列表框是这样的(从桌面开发带来的习惯-_-) 或者是穿梭框的左半边 但是这么基础的东西,element-ui 竟(懒)然(得)没...
  • Vue项目实现vue element组件走马灯效果

    千次阅读 2019-05-10 09:08:02
    我的qq 2038373094 效果如下 (由于不支持动态图,我就截图了) ....vue文件如下 <template> <el-carousel :interval="5000" arrow="always" class="d_jump" :height="imgHeight+'px...
  • Vue Element Admin 添加一级菜单与页面

    千次阅读 2020-08-25 17:32:55
    2. 因为我们只做一级菜单,src/views/user 下面创建 index.vue 即可,模板写好。 name 名字尽量与模块名(文件名一致)。 开头字母大写,这样做是保持与原框架一致。 3. 根据需要写好页面。 4. 进入 src/...
  • 主要介绍了基于vue-element组件实现音乐播放器功能,代码简单易懂,非常不错,具有一定的参考借鉴价值,需要的朋友参考下吧
  • Vue Element UI + OSS上传文件

    万次阅读 热门讨论 2018-08-06 23:08:04
      Element UI提供了upload上传组件,可以到官网查看upload组件的详细介绍;查看upload组件的上传源码upload/ajax,使用的XHR对象上传文件,在项目实践中,发现该上传方法上传大文件时会出现问题,所以决定使用阿里...
  • Vue Element Admin 用mock模块模拟数据

    千次阅读 2019-11-07 11:56:06
    步骤简单 ...1. vue.config.js 这里的接口地址必须是mock的地址,不能是后端真正给的地址,否则会报404 2. .env.development 这里也必须用测试的地址,而不能用真正的地址,否则一样会报404

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 119,015
精华内容 47,606
关键字:

vueelement

vue 订阅