精华内容
下载资源
问答
  • VUE+ELMENTUI大数据平台

    2018-11-08 09:21:34
    公司的大数据平台使用,VUE+ELMENTUI+echarts希望给大家带来帮助!
  • 这个里面有获取编辑器内容和设置编辑器内容。两种方法,是以前上传的https://download.csdn.net/download/qq_33769914/10651952这个地址的整理。
  • 因为上传数学题时。填空题横线统一的让用户点击工具栏的一个按钮实现。然后数学公式没有方程式的功能,需要加个工具实现这个功能。然后下载项目打开命令行,再输入npm install 下载包依赖。在npm run dev 运行就行啦
  • ElmentUI动态创建表格

    2019-01-18 09:58:38
    根据后台数据动态创建表格,表头以及内容均根据数据动态变化时,就不再可以使用直接绑定lable可行了
  • vue+elmentui的使用心得

    千次阅读 2019-08-24 10:10:04
    vue和elmentUI的使用心得 使用customClass来覆盖样式。调整宽度。 二、elmentUI组件宽度自适应。 1.table: table通过min-width=‘100%’,来设定整个table的宽度,再利用min-width=“?%”来调整每一列的宽度,之和...

    vue和elmentUI的使用心得

    使用customClass来覆盖样式。调整宽度。在这里插入图片描述
    使用customClass来覆盖样式。调整宽度。
    二、elmentUI组件宽度自适应。
    1.table: table通过min-width=‘100%’,来设定整个table的宽度,再利用min-width=“?%”来调整每一列的宽度,之和应该等于100.
    2.form:form如果使用:inline=true,则不能设置自适应宽度,要想使用一行两列的话可以使用布局组件,如图。
    在这里插入图片描述
    三、https://www.cnblogs.com/xjcjcsy/p/7977966.html
    时间日期选择器设置选定的事件范围。
    四、关于input再弹出框中的使用,有时会出现输入框无法输入的现象,也无法删除。这时由于组件套用太深导致,这时,需要强制刷新。
    可以再输入框上定义一个@input事件,在js里加上如下代码。(select选择器,也有这种现象,加上@change事件,代码如上。
    在这里插入图片描述
    五、关于elmentUI的进度条的使用。效果如下。
    在这里插入图片描述
    两个属性最为重要,percentage和format()percentage原则上是0-100的数字,但是当我们使用后台传过来的数据,可以利用后台传的最大值。如:percentage=row/(maxrow/100),这样就保证后台传的所有数据处理后都在0-100,之间。而且最大值是100.
    六、关于穿梭框的使用。当点击穿梭框中间的两个按钮时,会触发穿梭框的@change事件,这个事件会有三个参数,其中最重要的是direction(right,left)向左传还是向右传,然后来判断里面调用后台的那个接口,但是注意的是:左框数据是包含右框数据的,实际上数据是两个数组。左数组[{key,lebal,disabed}],右框的数据[key],这个应该是左框里子集。
    七、在table里面添加图片
    在这里插入图片描述
    通过v-if根据传来的值判断使用哪张图片,而且src一定不用绑定。图片地址可以从html走,…/代表是上一级。在这里插入图片描述
    也可以添加文字,利用Span标签。
    八、在table中添加空白块,

    在这里插入图片描述
    这时会有个Bug,是表格的最下方的滚动条会上移,通过重写一下class就好了如:在这里插入图片描述
    九、关于后台分页和前台分页,当后台数据量不大时,可以前台分页,
    在这里插入图片描述
    @current-change是当前页变化时触发的事件,当后台分页时,可以通过此事件,监听到当前页的变化,从而给后台的当前页就变化。触发新的查询接口。
    十、table的列数据如果过长的话隐藏。在这里插入图片描述 一句话搞定。
    十一、elment的无限滚动使用心得。
    在这里插入图片描述
    注意的是:load从后台拿到数据后,一定要和其他的(table的数据)分开,否则会出现我滑动鼠标也会控制我table的数据加载。
    十二、会用到的字符串的一些方法。substring(index,index),截取字符串,
    indexof()扫描字符串获得index。+:字符串拼接。

    展开全文
  • 在el-table中添加事件函数 @cell-click=“tableEdits” tableEdits(row, column, cell, event) { var that=this; console.log(row,column,cell,event,'------modify----') // ''.includes(column.label) ...

    在el-table中添加事件函数 @cell-click=“tableEdits”

      tableEdits(row, column, cell, event) {
              var that=this;
            console.log(row,column,cell,event,'------modify----')
            // ''.includes(column.label)
            // if (column.label=="产品型号") {
            if (column.label.includes('产品型号')) {
                var beforeVal = event.target.textContent;
                    event.target.innerHTML = "";
                    let str = `<div class='cell'>
                        <div class='el-input'>
                        <input   placeholder='请输入内容' class='el-input__inner' type='text' maxlength='16'>
                        </div>
                    </div>`;
                    cell.innerHTML = str;
                    //  获取双击后生成的input  根据层级嵌套会有所变化
                    let cellInput = cell.children[0].children[0].children[0]; 
                    cellInput.value = beforeVal;
                    cellInput.focus(); // input自动聚焦
                    // 失去焦点后  将input移除
                    cellInput.onblur = function() {
                        console.log('失去焦点事件')
                        // 调用axios接口
                    let Produt=cellInput.value.trim();
                    // console.log(Produt.length,'shiqu');
                        if(Produt.length > 0 && Produt!=row.productName){
                          console.log(Produt.length,'shiqu');
                            let onblurCont = `<div class='cell'>${cellInput.value}</div>`;
                            cell.innerHTML = onblurCont; // 换成原有的显示内容
                                that.$http({
                                    url:'product/update/productModel',
                                    method:'post',
                                    data:{
                                        id:row.id,
                                        productModel: Produt,
                                    }
                                }).then((response)=>{
                                if(response.code==200){
                                        that.firstOne();
                                    }
                                })
                        }else{
                            cell.innerHTML =  `<div class='cell'>${beforeVal}</div>`;
                        }   
                    };
                }
            },```
    
    
    展开全文
  • vue+elmentui+ueditor +KityFormula数学公式 编辑器。下载以后通过npm install 。然后npm run dev运行
  • elmentui+vue 中将el-collapse折叠面板默认全部展开 这是 <el-collapse v-model="activeNames2" @change="handleChange"> <template v-for="(item,index) in docList"> <el-collapse-item :title=...

    elmentui+vue 中将el-collapse折叠面板默认全部展开

    这是el-collapse

    <el-collapse v-model="activeNames2" @change="handleChange">
        <template v-for="(item,index) in docList">
           <el-collapse-item  :title="item.docName" :name="index">
               <div v-html="item.content"></div>
               <div style="width:100%;">
               <div  v-for="item1 in item.attachList" style="width:100%;height:30px;">
               <el-link type="primary" @click="getOssUrl(item1.ossName,item1.fileName)" target="_blank">{{ item1.fileName }}
               </el-link>
               </div>
               </div>
           </el-collapse-item>
        </template>
     </el-collapse>
    

    这是写到methods

    panelExpand(){
          for(var i = 0; i < this.docList.length; i++) {
              this.activeNames2.push(i)
            }
        },
    

    因为el-collapse中的v-model中的数,其实是个数组,我们又是写的动态的,因此不知道需要循环多少次
    所以将其循环,默认打开所有折叠面板
    此写法类似于

      activeNames2 :['1','2','3','4'........]
    
    展开全文
  • ElmentUI的NavMenu组件动态封装 使用递归的方式动态渲染subMenu和menu_item ps: 这是一个问题贴 父组件
  • 理论上也可用于其他组件库 这里以修改一个input框的文字颜色为例,正常我们要修改el-textarea__inner的值用以下写法即可 /deep/ .el-textarea__inner { color: red } 思路就是将red引入为一个变量: ...

    理论上也可用于其他组件库

    这里以修改一个input框的文字颜色为例,正常我们要修改el-textarea__inner的值用以下写法即可

    /deep/ .el-textarea__inner
    {
      color: red
    
    }
    

    思路就是将red引入为一个变量:

    /deep/ .el-textarea__inner
    {
      color: var(--textarea-color)
    
    }
    

    我们在需要修改的地方,为--textarea-color变量赋值

    <el-input
      type="textarea"
      :rows="5"
      size="medium"
      placeholder="请输入内容"
      v-model="test.input" :style="{ '--textarea-color': test.color}">
    </el-input>
    

    在js内修改color值就OK

    data (){
    	return {
    		test: {
    			input: '',
    			clolor: ''
    		}
    	}
    }
    

    在这里插入图片描述

    展开全文
  • 我目前的问题是,有2个Notification 通知,但是这两个会同时弹出,怎么样让他逐个弹出,比如第一个弹出完然后才弹第二个 第三个 第四个 等等 我用了setTimeout,但是只会再延时后 全部弹出来,并不会延迟后才弹下一...
  • 在mian.js里面: import ElementUI from ‘element-ui’; // 修改 el-dialog 默认点击遮照为不关闭 ElementUI.Dialog.props.closeOnClickModal.default = false
  • elmentui的表单验证 参考elment官网:https://element.faas.ele.me/#/zh-CN/component/form 关于表单验证的深层绑定写法 <el-form-item label="his系统编号" prop="doctorPracticeSites[0].doctorNumber"> ...
  • 我们在开发中会使用到elmentui日期选择器组件如图 <div class="block"> <span class="demonstration">起始日期时刻为 12:00:00</span> <el-date-picker v-model="value1" type=...
  • ElmentUI:Form表单验证

    2021-07-10 09:28:45
    官方文档 Element-Form表单 <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm"> <el-form-item label="活动名称" prop="name">...
  • 效果如图 <el-table stripe :data="tableData" :cell-style="columnStyle" height="150"> <el-table-column label="#" align="center" type="index" width="70"/> <el-table-column label="楼层...
  • 10.Vue引入elmentUI插件

    2019-07-31 17:10:21
    Vue小白笔记10——引入elmentUI插件
  • elmentui出现组件错误

    2020-08-09 23:03:05
    elmentui搭建前端出现prop参数传递错误,导致组件不能输入等情况, 一、用控制台检查参数如传递的v-model数据绑定的参数要在data(),进行初始化。
  • elmentUI使用tabs标签页展示动态路由

    千次阅读 2019-12-25 22:00:39
    elementUI中tabs标签页中展示动态路由内容 在home界面中添加tabs标签页,导航栏点击坐标路由时,在标签页中,展示路由中...实现动态的效果。 vuex中存储数据 在vue的vuex中存储,标签页路由的相关数据 ... openTab...
  • mian.js 文件里面: import ElementUI from 'element-ui'; // 修改 el-dialog 默认点击遮照不关闭 ElementUI.Dialog.props.closeOnClickModal.default = false; // ...
  • Vue.js 2.0之全家桶系列视频课程

    万人学习 2018-04-21 16:52:25
    基于新的Vue.js 2.3版本, 目前新全的Vue.js教学视频,让你少走弯路,直达技术前沿! 1. 包含Vue.js全家桶(vue.js、vue-router、axios、vuex、vue-cli、webpack、ElementUI等) 2. 采用笔记+代码案例的形式讲解,...
  • 1.参考此博客,希望有以下知识储备 vue的路由,跨域请求,springboot2.X,html,已经阅读elementUI官网中关于upload组件的详细介绍。 2.废话不多说,直接讲解细节。 前台使用webstorm搭建的vue工程:访问地址使用... ...
  • 因业务需要,要做一个从右下角弹出的消息提醒,需要自定义元素和样式,其代码如下: const h = this.$createElement this.instance = this.$notify({ title: '来电提醒', message: h('div', null, [ ...
  • 文件上传操作 方式一:直接使用elementui本身的上传组件进行
  • el-input为例: <el-input id="user-input" type="textarea" placeholder="请换行输入不同用户" :autosize="{minRows: 2, maxRows: 10}" v-model="users" ... @input="cha...
  • vue+elmentui+ueditor +数学公式 编辑器

    千次阅读 2019-02-19 08:53:22
    转自:https://download.csdn.net/download/qq_33769914/10651952
  • 怎么使用elmentUI

    2019-05-03 23:38:00
    参考: 在vue项目中快速使用element UI https://www.cnblogs.com/songdongdong/p/6929037.html 转载于:https://www.cnblogs.com/wanqingcui/p/10807103.html
  • 对element的table组件进行了封装,更方便地使用elment ui的el-table组件

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 3,360
精华内容 1,344
关键字:

elmentui