elementplus steps 审批流

转载

mob64ca13ff5b03 2024-12-17 11:56:39

文章标签 vue element ie 选择器级联 文章分类 机器学习人工智能

总结ie中遇到的一些问题希望各位大神多多指教。前端小白

element 版本 2.10.1

1.在dialog 中的问题(在dialog 中修改样式不要加scoped，否则样式可能不生效至少我遇到的都是)

1.1 在dialog 如果使用center 那么表单项部分组件会居中显示

elementplus steps 审批流_级联

想要组件不居中我是不适用center 属性想使用 标题和底部 居中，在style非scoped下el-dialog自动添加的div类名的style加上important 会覆盖默认样式

如：

el-dialog 加 custom-class="centerDialog"
.centerDialog .el-dialog__title{
width:100%;
  text-align:center !important;
  display:inline-block !important;
  line-height:24px !important;
  font-size:18px !important;
  color:#303133 !important;
}
.centerDialog .el-dialog__footer{
width:100%;
  text-align:center !important;
  padding:4px 20px 20px !important;
}

1.2 在做登录和重置密码的时候要在input中加入自己的图标发现ie有一个眼睛的样式查了才发现

ie中 input type=password/text 有默认样式要去掉默认样式以下（style 中不要加scoped）

.form_reset input::-ms-clear{display:none !important;}

.form_reset input::-ms-reveal{display:none !important;}

.form_reset是设置的form表单的class 为了防止影响其他页面

1.3 Table 表头不显示打包后出现单元格异常部分表头线条不显示？？单元格多出几个??反正各种诡异的现象

做了很多尝试开发环境解决了但是打包出来有问题打包好了不同屏幕显示又有问题所以最后直接显示了表头

（如果有遇到这个问题的小伙伴有解决办法可以私信我哟）

2 时间控件

时间控件使用中文placeholder编辑时会无法显示时间，改成英文或去掉这个属性就能正常显示

3 table显示异常

突然遇到一个table 表头线条不显示 el-table 加上以下代码恢复正常（原因不清楚）

style="margin-top:10px;

4 .时间对象

ie不支持new Date(2019-10-10 12:00:00) 数据转换格式因为要转换时间的地方多我使用了插件moment

官网：http://momentjs.cn/

5.路由问题

我做的项目 左侧菜单栏是 从后台获取数据生成的 我一开始是获取到数据生成树结构 并同时给component 赋值 但是跳转一直有问题 后来打印才发现生成的组件有问题 最后才发现 我先生成树结构后再给 component 组件生成没有问题了

elementplus steps 审批流_ie_02

6.预览图片问题

项目中要做图片预览 下载了插件v-viewer 官网：https://github.com/mirari/v-viewer

v-viewer 插件在ie中使用可能会出现 图片在dialog 下层的问题

Vue.use(viewer, {
  defaultOptions: {
    zIndex: 999999
  }
});

（我使用使用版本2.10.1 的element下dialog zIndex层级从2007开始如果有嵌套dialog会依次累加所以使用zIndex: 999999 已经足够）

7.打开项目一片空白

ie 低版本不支持es6

安装插件 babel-polyfill （npm install --save babel-polyfill）

引入

elementplus steps 审批流_选择器_03

8.前端实现页面导出为word

前端实现导出为word 依赖jQuery fileSaver wordexport 我使用的是js在首页引入

在某个组件引用的时候一直报错所以我改成了全局引用

三个js 放在static下面的word文件中在最外层的index.html中引入

elementplus steps 审批流_vue_04

目前整理这些不定期更新

20191009更新

9.cascader 控件在ie和谷歌上面板字符过长显示不一致问题

在谷歌上级联选择器字数过多时

elementplus steps 审批流_级联_05

在ie下

elementplus steps 审批流_选择器_06

查看代码知道他是点击input才创建的一个弹窗

elementplus steps 审批流_选择器_07

elementplus steps 审批流_element_08

我试图找到对应的class 修改样式但是没有生效

最后想通过js修改内联样式如下

1.给级联选择器绑定事件

2.再通过js修改宽度

elementplus steps 审批流_vue_09

elementplus steps 审批流_element_10

expandChange(){
  this.$nextTick(function (){//不加$nextTick 下一级渲染会有问题
    let cssObj = document.querySelectorAll(".el-cascader-menu")
    document.querySelectorAll(".el-cascader-menu").forEach(item =>{
      item.setAttribute("style","max-width:180px")
    });
  })
}