记录Element-UI组件库使用过程中遇到的一些问题。

Element-UI

在vue项目中使用element-ui。官网：https://element.eleme.cn/#/zh-CN/component/installation

安装

进入vue项目根目录，使用cnpm下载（项目的node_modules文件夹内）：

--save，在package.json文件中进行注册。

1
2
3
4

sudo cnpm install element-ui --save

#删除模块（-g，全局）
npm uninstall xxx

在main.js文件中导入element-ui：

1
2
3
4

import elementui from 'element-ui'//由于是使用npm下载的，所以导入时可以使用名字element-ui
import 'element-ui/lib/theme-chalk/index.css'//使用默认主题（有可能是theme-default文件夹）

Vue.use(elementui);

样式问题

标签名可当作css类名使用。若修改样式不生效，可以在样式后加!important、或者在App.vue页面添加样式、或者新建一个css样式文件在main.js中导入（全局样式文件）。

1
2
3
4
5
6
7

//!important，例如el-tag标签，修改其样式如下：
.el-tag{
  margin: 0!important;
}

//导入全局样式表。在assets文件夹下新建css文件夹，再新建一个global.css样式文件，在main.js中使用下边的语句导入：
import './assets/css/global.css'

表格问题

el-table使用注意事项。添加合计时，数据更新后没有及时更新合计，可以在钩子函数updated中添加如下函数：

1
2
3
4
5
6

updated() {
  //只有data里的变量改变并且要在页面重新渲染完成之后,才会进updated生命周期，只改变data里的值但是没有再页面上渲染该值的话并不会触发updated方法。
  this.$nextTick(() => {//this.$nextTick()将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它，然后等待 DOM 更新。
     this.$refs['table'].doLayout();//doLayout方法可以对table进行重新布局。解决金额合计 不及时显示的问题（注意：table上要使用ref=table绑定控件）
  })
}

滚动条问题

elementUI滚动条

官方文档中没有提及的滚动条，在需要使用滚动条的地方使用。一般包裹着el-main。

隐藏横向滚动条（若不生效，参考上边的样式设置）：

1
2
3
4

/* element官方滚动条，隐藏横向的滚动条*/
.el-scrollbar__wrap {
  overflow-x: hidden !important;
}

返回顶部

使用element官方提供的el-backtop，添加返回顶部功能。注意target为触发滚动的对象，我设置在el-main上。“.backtop”，自定义的css类名，作为锚点添加到el-main上。

1
2
3
4
5
6
7
8

//建议放在页面最上边
<el-backtop target=".backtop" visibility-height="10"></el-backtop>
//可通过visibility-height设置触发“返回顶部”图标的滚动高度。默认200，我设置比较低。


//添加锚点
<el-main class="backtop">
</el-main>

el-dialog组件

el-dialog组件的一些坑

main.js中使用

在vue项目中的main.js中直接使用element-ui中的Message 消息提示、MessageBox 弹框、Notification 通知

例如：在main.js中的axios响应拦截器中使用elementui的MessageBox

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

import Vue from 'vue'
import App from './App'
import router from './router'
//Element-UI
import elementui from 'element-ui' //在package.json文件中有名字为element-ui的依赖
import 'element-ui/lib/theme-chalk/index.css' //导入样式文件（有可能是theme-default文件夹）
Vue.use(elementui);
...（省略其他import）


// response（响应）拦截器中,  隐藏进度条NProgress.done()
axios.interceptors.response.use(config => {
  if (config.headers.code == "401") {
    //判断当前页是否有el-message标签，如果没有则执行弹窗操作（防止弹出多个相同的弹窗）
    if (document.getElementsByClassName('el-message').length === 0) {
      elementui.MessageBox({//组件在前边导入为“elementui”
        title: '提示',
        message: "您的登录状态已失效, 请重新登录！"
      }).then(() => {
        window.sessionStorage.clear();
        router.push("/login");
      })
    }
  }
  return config;
})

弹窗问题

防止弹出多个相同的弹窗，可在弹窗之前使用if语句判断页面中是否已经有el-message标签。案例见上边的“main.js中使用”。

表单问题

页面刷新问题

解决提交表单后刷新页面的问题：

• form标签使用onsubmit="return false"来阻止页面刷新
  • 或者 vue数据绑定中使用事件修饰符.prevent
• form标签上不写action、method参数
• 监听form表单的submit事件，用ajax提交数据，代替掉默认的提交操作

重置表单

form表单重置，resetFields函数使用注意事项：

1. el-form中，要设置ref属性。（后边可通过this.$refs.ref名操作DOM）

   1. 给form表单注册引用信息。
   2. 在methods中（vue内部），可通过this.$refs.ref名或this.$refs['ref名']获取到DOM元素。

2. el-form-item中，要设置prop属性。尽量与form表单绑定的变量同名。

   1 2 3 4 5 6 7 8 9 10

   <el-form :model="form" ref="form" :rules="rules"></el-form> <!-- 物资名称 输入框，必填 --> <el-form-item prop="mat_name" label="物资名称" required> <el-input v-model="form.mat_name"> </el-input> </el-form-item> </el-form> :model与ref绑定的字符form没有什么关系，前者代表data中定义的form变量（: =>V-bind），后者代表el-form标签的ref属性设置为字符form。ref属性绑定的名字可以为任意字符，我这里为了好辨认设置与form表单绑定的变量同名

3. 在使用resetFields之前，确保form表单已渲染。

   1 2 3 4 5 6 7 8 9 10 11 12 13

   //$nextTick。使用场景：需要在视图更新之后，基于新的视图进行操作 this.dialog.dialogFormVisible = true; //显示表单 this.$nextTick(() => {//表单渲染完成后 this.$refs['form'].resetFields(); //清空form表单的数据 }) //更保险的做法： this.$nextTick(() => { //表单渲染完成后 if (this.$refs.form) { this.$refs.form.resetFields(); //清空表单数据 } })

4. resetFields函数不起作用，还可以使用下边的方法进行重置：

   1 2 3

   for (var key in this.form) { this.form[key] = ""; //清空form表单的数据 }

数据刷新

• 表格数据刷新，见上边
• 尽量使用this.$set()来更新数据
• 更新数据后，可使用this.$forceUpdate();来刷新页面

选择文件

elementUI官方文档中，有图片的选择示例。

文件转换为字符串

笔记在这篇博客。（web小技巧）

将excel转换为json

使用SheetJs将excel转换为json对象（数据保存在数组中），笔记在这篇博客。（web-插件）