草庐IT

element-admin

全部标签

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方法,可以

oauth - 带有市场的 Admin-sdk 不起作用

我试图用admin-sdk构建一个市场应用程序。阅读文档,就市场应用程序而言,两条腿的身份验证似乎是唯一的方法。想检查当前用户是否是管理员,为此,我想使用https://www.googleapis.com/admin/directory/v1/users/(useremail)?xoauth_requestor_id=(admin-email)我一直在努力既要保持一致又要成为管理员Authorizationheader也如下。OAuthrealm="",oauth_signature_method="HMAC-SHA1",oauth_version="1.0",oauth_consu

oauth - 带有市场的 Admin-sdk 不起作用

我试图用admin-sdk构建一个市场应用程序。阅读文档,就市场应用程序而言,两条腿的身份验证似乎是唯一的方法。想检查当前用户是否是管理员,为此,我想使用https://www.googleapis.com/admin/directory/v1/users/(useremail)?xoauth_requestor_id=(admin-email)我一直在努力既要保持一致又要成为管理员Authorizationheader也如下。OAuthrealm="",oauth_signature_method="HMAC-SHA1",oauth_version="1.0",oauth_consu

Element-ui自定义组件:可折叠按钮列表

功能点1、工具栏的功能按钮要超宽不换行,宽度不够折叠进”更多“按钮;2、下拉菜单按钮和纯图标按钮默认不折叠;3、折叠前后按钮组顺序保持不变。实现思路1、默认展开全量按钮,并对其宽度进行缓存;2、循环计算展开按钮的总宽度与容器宽度的差值,并进行按钮的折叠与释放处理;3、监听窗口大小改变,不断进行步骤2;4、难点:区分放大、缩小操作进行分别处理(当然也可以每次遍历全量按钮,这样只要考虑需要折叠的情况,这个比较简单,这里不展开说明)。演示效果  index.vue内页标题查询表格标题exportdefault{components:{VpButtonList:()=>import('./vp-but

el-form单个表单项校验方法;element-ui表单单个选项校验;el-form单个表单校验

当我们使用element-ui的el-form时,想在提交表单前对其中一个表单进行验证时就可以使用element自带的方法“validateField”如图:使用示例el-form:model="registerForm"v-loading='loading':rules="rules"ref="registerForm">el-form-itemlabel="手机号码:"size="small"prop="phoneNum">el-inputv-model="registerForm.phoneNum"maxlength="30"placeholder="请输入">/el-input>/el

基于Element-ui 封装穿梭框(左侧树 右侧列表,可全选,列表可拖拽)

Element-ui提供的穿梭框只支持列表,根据实际需求自己写了一个左边是树结构,右边是列表结构的穿梭框,(如果需要两边都是树结构的话,需要把右侧的逻辑参考左侧改一改)拖拽使用了vuedraggable插件效果图组件代码template>divclass="transfer-tree">divclass="transfer-panel">divclass="transfer-panel-header">el-checkboxv-model="leftAllChecked":disabled="!(leftDataList&&leftDataList.length)":indeterminate

element-ui——timeline时间线组件+自动滚动+v-infinite-scroll无限滚动+动态加载——技能提升

最近看到同事在弄日志记录,需要实现的效果是:自动滚动+无限滚动+动态加载数据最终效果图如下:1.html部分template>divid="boxTimeline"v-infinite-scroll="fnLoadMore":infinite-scroll-distance="ovISD">el-timelineid="timeline1">el-timeline-itemv-for="(items,index)intableData":key="index":timestamp="items.createTime"placement="top">el-card>h4v-html="resTx