Element UI相关知识记录

68 阅读1分钟

问题

若依的左侧菜单图标颜色没有随字体颜色变化

原因:
1、svg带fill标签,需要删除
2、svg没有path标签,是img标签所以不行
下面这个网站转换的带path
Convertio

日期格式化

    <el-date-picker type="date" placeholder="选择生日" v-model="addUserForm.birth" style="width: 100%;"
                    format="yyyy-MM-dd" value-format="yyyy-MM-dd" @change="getBirthDate">
    </el-date-picker>
    
  getBirthDate (date) {
    this.addUserForm.birth = date
  }

Element UI中el-date-picker设置日期格式

在element组件中自定义组件的样式不生效问题(vue scoped scss无效问题),如:表格行颜色设置不起效

参考文章

本人尝试添加 /deep/ 有效

// 强制修改级联选择框的默认宽度
	.my .el-input__inner{
		border-radius: 30px;  /* 这个不起作用 */
	}
	.my /deep/ .el-input__inner{
		border-radius: 30px;  /* 这个起作用 */
	}
        
        在scss中可以使用 ::v-deep 
        ::v-deep .el-dialog__footer{ background: #000; padding: 0; margin-top: 10px; }

element更改导航菜单被选中项的背景颜色

.el-menu-item.is-active {
   background-color: rgb(231, 235, 240) !important;
}


ResizeObserver loop limit exceeded报错解决方案

原文

import Vue from 'vue'
import ElementUI,{ Table } from 'element-ui'

// 解决 ElTable 自动宽度高度导致的「ResizeObserver loop limit exceeded」问题
const fixElTableErr = table => {
  const oldResizeListener = table.methods.resizeListener
  table.methods.resizeListener = function () {
    window.requestAnimationFrame(oldResizeListener.bind(this))
  }
}

// 一定要在Vue.use之前执行此函数
fixElTableErr(Table)

Vue.use(ElementUI)