用了很多次el-input输入框，但是没有对这一个实现方式做深一步的思考，这次就把自己整理的方式记录下来；如果默认直接使用，这里的input输入框的宽度是width：100%。继承它的父级的宽度。思路1：1.首先我们可以获取输入内容的宽度，然后给定一个span标签，使其的宽度撑开input的宽度。{{spanText}}这里需要实时监听输入内容的宽度methods:{getValue(val){this.spanText=val;constspanStyle=document.querySelector(".spanText");this.$nextTick(()=>{//如果不用$nextT
场景在应用elementUI的el-select下拉框的时候，界面展示只需要文案就足够了，但我们传参给后端可能需要多个字段,如有以下后端接口返回数据:constoptionsList=[ { name:'', id:'', class_name:'', class_type:'', english_name:'', is_default:false, online_worker_count:0, time:"2022-12-2616:30:21", } ...]即需要获取当前选择的name对应的对象的所有数据实现使用element官方的属性：value-key作为value唯一
el-tree，单击和右击都有一个参数，即节点对应的Node打印这个Node，如下：@node-contextmenu="rightClick"//节点右击事件*/rightClick(MouseEvent,object,Node,element){console.log(Node,"Node");},展开parent这个parent就是父节点，父节点中还包含了它自己的父节点，如果无父节点，返回nullel-tree获取父节点还是挺简单的，树组件内部已经返给你了，直接获取就行vue-treeselect获取父节点，文档中未找到直接获取的方法，我这里说一下自己实现的方式@select="(nod
1、日期选择器组件代码2、具体实例data(){return{ruleForm:{startTime:'',},rules:{startTime:[{required:true,message:'请选择活动起始日期值',trigger:'change'},],},forbiddenStartTime:{//禁用当前日期之前的日期disabledDate:this.disabledDateMethod,},}},1）禁止选择当天之前的日期methods:{disabledDateMethod(time){//Date.now()是javascript中的内置函数，它返回自1970年1月1日00:
一、一重数组的绑定提示：1、每一项el-form-item的prop以及rules的赋值以及data中form的结构(行内样式是为了复制直接看效果)2、注意看users以及mobile的prop绑定的值不一样的，因此当只有一重数组时这两种写法都是可以的:prop="'users['+index+'].userName'":prop="'users.'+index+'.mobile'"结构如下代码所示：template立即创建取消scriptexportdefault{name:'',data(){return{form:{users:[{userName:'',mobile:null}],ot
当我们使用elementui的时，发现菜单栏无法撑满页面高度的100% 采用css样式设置height：100%的方法也无效我们将height:100%改为height:100vh即可效果图如下 点开菜单栏时，我们发现菜单栏右侧会有部分突起我们给定义一个类名使用css进行封装即可解决
通过原生js和moment.js分别获取moment().format('YYYY-MM-DDHH:mm:ss')格式的时间moment.js:文档|Moment.js中文网(momentjs.cn)
步骤：定义模板（做循环遍历处理）：template>divclass="container">el-cardv-for="(item,index)inrouteList":key="index"class="routeList-box">-->el-treeref="tree"class="el-tree"show-checkboxnode-key="id":indent="0":data="item.list":props="defaultProps":highlight-current="true":default-expand-all="true":render-content="ren
在开发的过程中，遇到了一个关于页面排版的问题，如何将el-form中一个el-form-item的label左对齐，文档里提供了label-position 这个属性是控制整个表单的label的位置。 文档中提供了label-width,给单独的el-form-item设置label-width:auto;功能实现了，但是校验的提示却错位了，最后不得以修改了el-form中默认样式，来控制他label居左.group-item-vo{display:flex;justify-content:flex-start;padding-bottom:14px;span{margin-ri
这是我们要实现的效果elementui上的代码和效果如下：.avatar-uploader.el-upload{border:1pxdashed#d9d9d9;border-radius:6px;cursor:pointer;position:relative;overflow:hidden;}.avatar-uploader.el-upload:hover{border-color:#409EFF;}.avatar-uploader-icon{font-size:28px;color:#8c939d;width:178px;height:178px;line-height:178px;te
