草庐IT

moz-element

全部标签

element UI 动态生成表头

    最近开始搞vue了。    由于elementUI中的table不能像antd里的table直接注入json字符串生成表头,这导致了不能轻松的通过后台生成表格,或是对表头进行排序,在网上参考找了一种最简易的方法,可以给表格里面注入各种自己想要的效果,代码如下:{{scope.row.status}}{{scope.row.status}}{{scope.row[th.prop]}}修改删除相应的json字符串为以下:tableColumns:[{id:1,label:'岗位编号',prop:'id',align:'center',disabled:true,visible:true,}

Element Ui 实现表格单选功能

今天碰到一个需求,把element-ui中的table多选框改成单选框,实现单选功能话不多说,直接上代码exportdefault{data(){return{tableData:[{id:'1',date:'2016-05-03',name:'王小虎',address:'上海市普陀区金沙江路1518弄'},{id:'2',date:'2016-05-02',name:'王小虎',address:'上海市普陀区金沙江路1518弄'},{id:'3',date:'2016-05-04',name:'王小虎',address:'上海市普陀区金沙江路1518弄'},{id:'4',date:'201

使用Element-plus库时,控制台出现警告:$weight: Passing a number without unit % (0) is deprecated.

虽然不影响项目的正常运行,但是看着挺不爽的... 在网上找了很多资料,终于在这个回答:DevelopersCommunitybyKeenThemes||sasswarning,can'tfindthecauseoftheproblem找到了有效的方法,修改sass和sass-loader的版本:"sass":"1.55.0","sass-loader":"13.2.0",

element-ui的两种远程搜索实现

1.实现效果:2.利用el-autocomplete实现远程搜索el-autocomplete是使用fetch-suggestions方法实现,当输入的时候,会调用我们提供的方法,传入的参数是输入的value,以及callback。把请求到的下拉列表通过callback返回(列表的每一项以key为value的形式传,也可以通过value-key换成其key)//:fetch-suggestions="searchNameNick":返回获取到数据的方法,也就是说输入框一获取焦点。就会自动调用该方法拿到数据。//select="handleSelect":当选中建议项时,调用该方法。asyncs

element ui中el-table的合并相同列内容的解决方法,简单实用

elementui中el-table的合并相同列内容的解决方法,简单实用废话不说,直接上代码,vue页面中的几个部分如下:注意几点:1、el-table中写上::span-method=“objectSpanMethod”2、两个方法不用改动3、想合并哪列,在data中columnArr数组里填上列名。4、如果有bug,自己去调整吧template>div>el-table:data="tableData"style="width:100%":cell-style="{'text-align':'center'}":header-cell-style="{'text-align':'cente

vue+element ui 完成 树形数据穿梭框

elementui中的穿梭框只能实现平铺数据的穿梭,这次的需求是要树形数据穿梭,所以写的是tree组件自己组合的穿梭框divclass="flex_square">divclass="tree-tranfertree-tranfer-left">el-inputplaceholder="输入关键字进行过滤"v-model="leftFilter">/el-input>el-treeclass="filter-tree":props="defaultProps":data="dataLeft"show-checkboxref="treeLeft"node-key="id":filter-node

Element UI 中的Table表格组件自定义行高与整个表格自适应高度

效果图:代码:exportdefault{name:"Demo",data(){return{tableData:[{id:'01',name:'小红',address:'北京'},{id:'02',name:'小李',address:'上海'},{id:'03',name:'小明',address:'广州'}]}}}解析:1、:header-row-style="{height:'30px'}"设置表格列标题的高度为30像素。2、:header-cell-style="{background:'#f5f7fa',padding:'0px'}"设置表格列标题的背景颜色。3、:row-style

element ui - el-select 添加可输入功能

elementui-el-select可以支持输入功能场景思路方法场景vue2+elementui的项目中,产品希望el-select可以支持输入功能,也就说用户既可以下拉选择,也可以输入任意内容。思路通过阅读elementui的官方文档,发现allow-create这个属性就可以支持用户创建新条目,但美中不足的是,创建新条目后还需要手动选择点击一下,否则无效。这个效果不太理想,我们希望的是当手动输入内容时,el-select可以充当el-input使用,也就是输完失焦即将数据写上。此时可以借助失焦事件blur。方法allow-create属性需配合filterable使用;default-f

基于element ui VUE 2 VUE router的侧边导航栏以及顶部路由历史记录的组件

换了个新公司搬砖,环境比以前好了干活都开心,最近有个后台要写想了想以后重复写这几个组件挺麻烦的就干脆搞了几个可复用组件,以下的内容就拿我这个新项目示例吧,直接贴代码啦首先vue-cli创建项目,有不会创建项目的靓仔靓妹们可以留言我更新一下vue-cli的使用教程然后呢在router/index.js里这么写(像什么path,name,title这些都是自定义的)importVuefrom"vue";importVueRouterfrom"vue-router";Vue.use(VueRouter);//hide:如果不需要在左侧导航栏显示这个页面的标题可以在对应的路由的meta里把hide设置

vue+element ui 文件上传之文件缩略图缩略图

文件缩略图按官方文档说的是使用 scoped-slot 去设置缩略图模版。且需要上传的是图片,因为有预览等功能,如果上传的不是图片,会显示不出来。{handleSuccess(response,file,fileList)}":file-list="fileList"accept="image/jpg,image/jpeg,image/png":before-upload="handleBeforeUpload"ref="upload":auto-upload="true">-->这里设置了图片的格式等,用户在选择的时候,会自动校准图片格式,官方文档中提供了before-upload方法,可以