写项目时经常会遇到使用el-tree的场景，针对用过的，做个简单记录一，先简单讲一下怎么安装element-ui：1.安装：npmielement-ui2. 在main.js中引入样式以及组件：importElementUIfrom'element-ui'import'element-ui/lib/theme-chalk/index.css'Vue.use(ElementUI)3.丢个官网在这里，详细可以去查看：Element-Theworld'smostpopularVueUIframework二，el-tree常见属性： data----用来展示数据props----树状图配置label-
使用el-date-picker日期选择器选择的日期是string类型且是箭头所指的这种格式解决方法一：1、在这个组件后面加上这两个，可以修改格式2、在后端实体类上加上注解即使前端的是string类型，但是通过json自带的格式匹配注解工具，将string转换成LocalDateTime类型@JsonFormat(pattern="yyyy-MM-ddHH:mm:ss",timezone="GMT+8")privateLocalDateTimeuserBirthday;解决方法二：用npm下载一个moment.js1、npminstallmoment--save2、在main.js中注册imp
vue中循环添加多个动态环形进度条,并且每个对应添加自己的状态文字根据目前的element-ui,无法直接使用format属性去循环动态添加多个环形进度条的指定文字内容,因为format中限定了函数参数,如下:因此采取了一些迂回的写法divv-for="(item,index)inarr"> el-progresstype="circle":percentage="item.pc":color="progressColor(item)":format="(p)=>progressFormat(p,item)">el-progress>div>exportdefault{ methods:{
个人博客同步csdn首先给el-select的容器上面自定义一个类名，避免污染别的el-select写css，注意这里用了less.el-select-dense{--height:35px;//el-select本身的高度/deep/input{height:var(--height);}//el-select右边的图标/deep/.el-input__icon{line-height:var(--height);}}效果图（前）效果图（后）
单元格内容是table绑定的data中的某个属性决定的用插槽来自定义显示的内容取到当前列的所有数据el-table-columnlabel="姓名"width="180">templateslot-scope="scope">{{scope.row.name}}template>el-table-column>可以在后端返回数据不是我们想要的时候做判断处理template自定义单元格内容的方式（具名插槽）scope.row：当前行的所有数据scope.$index：当前列的索引
最终效果图：用的是vue2写法，喜欢用vue3的同学可以自行修改下。需求要求：实现el-select功能复用；支持单选或者多选功能；支持全拼或者简拼搜索功能；直接上代码：pinyin.js文件importPinYinfrom"pinyin";/****@param{String}q-翻译的全拼key值*@param{String}j-翻译的简拼key值*@return{Object}*/exportdefaultfunction(str,q,j){q=q||"q";j=j||"j";letobj={[q]:"",[j]:""};if(str){obj[q]=PinYin(str,{style:
使用vue框架写法//选择器前要加::v-deep.inputScore-container{::v-deepinput::-webkit-outer-spin-button,::v-deepinput::-webkit-inner-spin-button{-webkit-appearance:none!important;}::v-deepinput[type=‘number’]{-moz-appearance:textfield!important;}}如果是input标签type=number，将上述css代码中::v-deep去掉即可
2023.1.11今天我学习了使用elementel-select组件下拉框选择数据失效的原因以及解决办法。如图： 当我已经选择启用状态的时候，然后点击停用状态没反应。原因： 是因为在配置表单的过程中，重复使用了这个字段。如：this.form.status=row.data.status就是在表单中重复使用了status这个字段，然后导致选择失效。解决办法：在el-select加入@change事件，进行强制渲染，这样就可以完成下拉框的选择。change(){//强制渲染this.$forceUpdate()}
element的el-input-number的默认值设置为空用el-input-number来限制输入框智能输入数字，例如价格之类的，v-model设为空和null时，默认的值显示为允许输入的最小值。如下：el-input-numberv-model="formData.idx":precision="0":step="1":min="1":max="100000">/el-input-number>el-input-numberv-model="formData.winnersNum":precision="0":step="1":min="1":max="500">/el-input-n
背景参与修改前端项目（Vue,Element-UI），添加用户体验性需求，只涉及页面UI，未涉及数据交互需求分析为一个窗口添加滑动栏解决方案使用el-scrollbar框架注意1，默认xy都有滑动栏，添加以下代码可以隐藏x轴的滑动栏.el-scrollbar__wrap{overflow-x:hidden;}2，style中1）.必须去掉scoped，否则overflow-x:hidden失效2.）外包一个div来减少对其他页面会有冲突（此时缺少scoped）可以通过控制div来控制滑动栏区域的大小案例el-scrollbar滚动条使用一致性Consistency与现实生活一致：与现实生活的流
