Vue插件之ElementUI

适用vue开发pc版，可能最先接触到的就是ElementUI这个插件库了。

1.遮罩层背景在上面

在el-tab-pane组件中创建一个dialog，但是会出现遮罩层在上面，而内容在下面的问题。

根据参考文章，只需要添加:append-to-body=”true” 即可

1
2

<el-dialog :visible.sync="dialogVisible" width="80%" :before-close="handleClose" :append-to-body="true">
</el-dialog> 

2.保持默认参数的同时进行自定义传参

在使用Checkbox时，绑定组件的change事件，如何保持默认的参数并传入自定义的参数呢？

1
2
3
4

<el-checkbox v-for="(item,siteLevelId) in sites.siteLevel" :label="item.LevelStr" :key="siteLevelId" 
               @change="handleCheckedSiteLevelChange(siteLevelId)">
               {{item.LevelStr}}
           </el-checkbox>

如果像上面的方式传入了自定义的参数，那么默认的组件的选中状态就没有了，如果直接写成了@change=”handleCheckedSiteLevelChange”，那么默认的值只有ture和false，无法做到判断组件选中状态了。

1
2
3

handleCheckedSiteLevelChange(value) {
    console.log(value);
},

解决方案就是适用lamba表达式

1
2
3
4

<el-checkbox v-for="(item,siteLevelId) in sites.siteLevel" :label="item.LevelStr" :key="siteLevelId" 
    @change="checked=>handleCheckedSiteLevelChange(checked,siteLevelId)">
    {{item.LevelStr}}
</el-checkbox>

这样就可以同时获取默认值和自定义值了

1
2
3
4

 handleCheckedSiteLevelChange(e,value) {
    console.log(e);
    console.log(value);
},

3.checkbox的选中状态无法动态更改

现象的描述，主要是使用for循环生成的checkbox组件，然后checkd属性是通过代码控制:checked=”test”的，当通过代码修改test的值为true或者是false时，checkbox的选中状态没有发生变化。

解决方式就是将:checked=”test” 换成:value=”test”,同时还要注意，外层不要有checkgroup，有了checkgroup也不可以，如果要有，也应该设置正确的值。

4.Injection “rootMenu” not found

在改别人的代码的时候，出现了问题：Cannot read property ‘activeIndex’ of undefined等等，出现一篇红，但是在代码里又找不到相关的内容。

最后是因为组件位置使用错误导致的

5.input自动获取焦点

要想让input自动获取焦点，可以使用focus()函数，但是需要注意的是，要等到元素渲染成功之后进行调用，我就遇到了这个问题，总是使用this.$refs.input.focus(),就是不生效。有两种方法，一种是使用nextTick函数，一种是使用setTimeout函数。
(1) 添加ref

1

<el-input v-model="input" placeholder="请输入内容" ref="input"></el-input>

(2) 绑定事件

1
2
3
4
5
6
7
8
9

this.$nextTick(() => {
    this.$refs.input.focus()
})

// or
let _this = this
setTimeout(function () {
  _this.$refs['input'].focus()
}, 1)

6.[Vue报错（element UI）：type check failed for prop “uniqueOpened”. Expected Boolean, got String.]

错误很简单，就是和参考文章中写的一样进行解决。

1
2
3
4

// 将
unique-opened="true"
// 改为,加了一个帽号
:unique-opened="true"

7.单独引入Message组件

1
2
3

import { Message } from 'element-ui';
Message(options);
Message.success(options)

7.滚动条

elementUI有自带的滚动条，但是文档上没有公开，el-scrollbar。

1
2
3
4
5

<el-scrollbar wrap-class="list" wrap-style="color: red;" view-style="font-weight: bold;" view-class="view-box" :native="false">
<div v-for="value in num" :key="vlaue">
    {{value}}
</div>
</el-scrollbar>

8.修改菜单栏父元素的点击样式

默认的菜单栏，当子菜单被选中的时候，父菜单时不高亮的。

通过覆盖样式，可以实现点击子菜单的时候，父菜单也出现高亮效果。

1
2
3
4
5
6
7
8
9
10

.el-menu-vertical-demo{
    // 菜单栏激活状态
    .is-active{
        .el-submenu__title{
            i,span{
                color:#409EFF;
            }
        }
    }
}

9.table的max-height不起作用

table中使用:max-height=”tableHight”绑定一个值，动态的增加表格的高度，但是不起作用。

1
2

let windowH=window.innerHeight;
this.tableHight=windowH-170;

看图，第二个table的max-height是起作用了，但是第一个table貌似不起作用。解决方法就是使用$nextTick包裹tableHight。

1
2
3
4
5

this.$nextTick(()=>{
    // 获取页面高度，并设置table高度
    let windowH=window.innerHeight;
    this.tableHight=windowH-170;
});

10.table表个多选

11.Cascader 级联选择器

在我使用级联选择器的时候，因为是动态创建的数据，从后台获取数据之后，然后组装生成 options 数组，进行动态展示，同时我有一个字段标致了已选项，我需要构造v-model，然后将已选中项填入进去。我有一个Doalog，打开的时候，去后台请求数据，然后生成可选项，已选项。但是我遇到的问题是，第一次打开对话框，自动填入正常，但是第二次打开对话框，自动填入的时候就会报错：Error in callback for watcher “options”: “TypeError: can’t access property “level”, node is null”。

解决方法:这个问题很奇怪，解决起来也是很随意的，我看源码的时候，没有看懂，但是我尝试了将option中的值，由数字类型，改为了字符串类型，于是虽然还是报错，但是最后还是把选择项回显了。

最后，我加了一个v-if进行控制，只有当 option 数组不为空的时候，才进行渲染，这样才解决了这个问题。后来我想想，可能是因为两者的渲染时机不同导致的，虽然同时赋予了可选列表对象，以及选择项的回显，但是如果不能先渲染可选列表对象，而是渲染的选择项，就会造成问题。

12.input无法修改值

这个问题，是我在使用v-for创建了多个 el-input 组件之后，其中的第一个第二个input可以进行值的修改，但是后面的部分就没法进行数据的更改，这就很让我纳闷了。

13.表格自动滚动

14.el-input使用计算属性的问题

如果在el-input钟使用v-model绑定到计算属性上，可能就会有问题，因为 v-model 是双向绑定，修改显示，内容也修改了，但是计算属性是缓存，这样就会造成冲突，当计算属性修改之后，是使用双向绑定的值还是使用计算属性的值呢？

15.表格中的slot-scope不起作用

[问题描述]
页面中有两个div，div中分别包裹了一个table,通过 v-if 根据一定的条件渲染其中的一个表格，剩下的渲染另外的一个table。

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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74

<template>
<div>
    <!--充值记录-->
    <div class="record" v-if="opType=='recharge'">
            <el-table
            :data="rechargelist"
            border
            :header-cell-style="{
                background: 'rgba(78,132,255,1)',
                color: 'white',
                textAlign: 'center',
            }"
            class="record-table"
            style="width: 100%">
            <el-table-column
                prop="siteno"
                width="120px"
                label="xx">
            </el-table-column>
            <el-table-column
                label="xx">
                <template slot-scope="scope">
                    <span>{{ sitesList[scope.row.siteno].sitename }}</span>
                </template>
            </el-table-column>
            <el-table-column
                label="xxx">
                <template slot-scope="scope">
                    <span v-if="userList&&userList[scope.row.operator]">{{userList[scope.row.operator].UserRealName}}</span>
                </template>
            </el-table-column>

        </el-table>
    </div>

    <!--单价修改记录-->
    <div class="record" v-else>
            <el-table
            :data="pricelist"
            border
            :header-cell-style="{
                background: 'rgba(78,132,255,1)',
                color: 'white',
                textAlign: 'center',
            }"
            class="record-table"
            style="width: 100%">

            <el-table-column
                prop="siteno"
                width="120px"
                label="xx">
            </el-table-column>

            <el-table-column
                label="xx">
                <template slot-scope="scope">
                    <span>{{ sitesList[scope.row.siteno].sitename }}</span>
                </template>
            </el-table-column>

            <!--- 这里的内容就显示不了 -->
            <el-table-column
                label="xx">
                <template slot-scope="scope">
                    <span v-if="userList&&userList[scope.row.operator]">{{userList[scope.row.operator].UserRealName}}</span>
                </template>
            </el-table-column>
            
        </el-table>
    </div>

</div>
</template>

[问题现象]
第一个table可以通过 template slot-scope=”scope”，渲染一定条件的单元格内容，但是当切换条件的时候，第二个表格只能有一个template，剩下的template都渲染不出来。

[解决方法]
至于为什么不行，我暂时不知道。解决方法，不能用v-if进行条件渲染，需要改为v-show进行渲染。

16.el-upload组件增加认证

普通的上传组件，加入el-upload就可以了，但是我的上传接口，都需要经过认证的，如何才能保证上传的时候加入认证信息呢？

1
2
3

<el-upload class="upload-demo" action="https://jsonplaceholder.typicode.com/posts/">
  <el-button size="small" type="primary">点击上传</el-button>
</el-upload>

【解决】
通过设置headers可以自定义请求头

1
2
3

<el-upload class="upload-demo" :action="apigateway+'/simulation/upload'" :on-success="handleSuccess" :headers="headers">
    本地文件
</el-upload> 

17.按需引入

(1) 安装babel-plugin-component
npm install babel-plugin-component -D

(2) 安装ElementUI
npm i element-ui -S

(3) 配置.babel.config.js
babel7.0之后，就放弃了.babelrc,改为使用.babel.config.js提供配置文件,然后修改文件内容为：

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

module.exports = {
  presets: [
    '@vue/app',
  ],
  "plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
};

官网上给的是将.babelrc修改为下面的内容，这里解释一下，其实这个presets-es2015和presets-env是两个不同的模块，需要单独安装，但是官方推荐是使用presets-env代替es2015，说env是永不过时的，同理可以推测，其实@vue/app也是一个插件，指定了如何编译和转换vue组件

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

{
  "presets": [["es2015", { "modules": false }]],
  "plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}

(4) 使用

1
2
3
4
5

import { Button, Select } from 'element-ui';
Vue.component(Button.name, Button);
Vue.component(Select.name, Select);

<el-button>默认按钮</el-button>

18.表格无限滚动

使用参考文章1的内容，基本上可以完成需求，自己尝试一下就可以了。

19.表格合并行列

使用element ui表格的时候，有一个需求就是动态合并某几列，比如就是说把所有奇数列的后面一列和前面一列进行合并，就像下面的这样合并，除了合并之外，还有一个要求，就是把后面的值保留，因为前面的是一个空值。

指定表格的 span-method 方法，当行有SiteLevel标志时，第一列不进行处理，从第二列开始，奇数列往后合并一列，偶数列删除，显示的值就是奇数列的值。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

// 合并总表的单元格
arraySpanMethod({ row, column, rowIndex, columnIndex }) {
    let sitelevel=row.SiteLevel;
    if(sitelevel==1){
    // 列的序号为奇数
    if(columnIndex==0){
        return [1, 1];
    }else {
        if(columnIndex%2!==0){
            // 奇数列往后合并一列
            return [1, 2];
        }else {
             // 偶数列删除
            return [0,0];
        }
    }
    }
},

结果就像这样：

本来我想着是合并前后两列的值，最后单元格剩下的值是后面一个的值，没有办法，似乎做不到，我只能调整了表头的顺序，把后面单元格的值放到前面，往后合并，后面的删除。

后来我又尝试了删除奇数列，然后偶数列向后合并一列，可以这么做。因为我要保留最后一列的值，不能进行删除，所以进行了非等判断。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

// 合并总表的单元格
arraySpanMethod({ row, column, rowIndex, columnIndex }) {
    let sitelevel=row.SiteLevel;
    if(sitelevel==1){
    if(column.label!="月度合计"){ // 保留最后一列的值
        // 列的序号为奇数
        if(columnIndex==0){
            return [1, 1];
        }else {
        if(columnIndex%2!==0){ // 奇数删除
            return [0, 0];
        }else { // 偶数列向后合并一列
            return [1,2];
        }
        }
    }
    }
},

20.动态列宽

在动态创建的列里面，设置列宽，可以通过:with 函数进行设置。

21.固定列无法自适应宽度

像下面这张图，有多级表头，有滚动条，并且第一列是固定列，当移动滚动条的时候，这个固定列就只显示一半的宽度了。

【解决方法】
默认的表格的固定列是 el-table__fixed ，宽度是 80px,这个可以通过设置css进行覆盖。