ElementUI使用过程中碰到的相关问题

Element是饿了么前端开源维护的Vue UI组件库,组件齐全，基本涵盖后台所需的所有组件，文档讲解详细，例子也很丰富。主要用于开发PC端的页面，是一个质量比较高的Vue UI组件库。

官网地址:http://element-cn.eleme.io/#/zh-CN
Github: https://github.com/ElementUI/element-starter

以下是个人在使用过程中遇到的一些问题和解决

1.el-table-column 动态改变单元格样式

功能：根据数据里的值，状态值为正常显示蓝色，异常显示红色

<el-table-column prop="isValid" label="状态">
    <template slot-scope="scope">
        <span :style="{color: scope.row.isValid ? 'blue' : 'red'}">{
   
   {scope.row.isValid}}</span>
    </template>
</el-table-column>

2.实现模糊查询（详情）

在这里插入图片描述
(1) indexOf(searchvalue, fromindex)

  /**
   * 使用indexof方法实现模糊查询
   * @param  {Array}  list     进行查询的数组
   * @param  {String} keyWord  查询的关键词
   * @return {Array}           查询的结果
   */
  function fuzzyQuery(list, keyWord) {
    
    
    var arr = [];
    for (var i = 0; i < list.length; i++) {
    
    
      if (list[i].indexOf(keyWord) >= 0) {
    
    
        arr.push(list[i]);
      }
    }
    return arr;
  }

(2) split(separator, howmany)

  /**
   * 使用spilt方法实现模糊查询
   * @param  {Array}  list     进行查询的数组
   * @param  {String} keyWord  查询的关键词
   * @return {Array}           查询的结果
   */
  function fuzzyQuery(list, keyWord) {
    
    
    var arr = [];
    for (var i = 0; i < list.length; i++) {
    
    
      if (list[i].split(keyWord).length > 1) {
    
    
        arr.push(list[i]);
      }
    }
    return arr;
  }

(3) match(searchvalue)

  /**
   * 使用match方法实现模糊查询:找到一个或多个正则表达式的匹配，没有找到任何匹配的文本，将返回 null 
   * @param  {Array}  list     进行查询的数组
   * @param  {String} keyWord  查询的关键词
   * @return {Array}           查询的结果
   */
  function fuzzyQuery(list, keyWord) {
    
    
    var arr = [];
    for (var i = 0; i < list.length; i++) {
    
    
      if (list[i].match(keyWord) != null) {
    
    
        arr.push(list[i]);
      }
    }
    return arr;
  }

(4) test(string)

  /**
   * 使用test方法实现模糊查询:字符串string中含有与RegExpObject匹配的文本，则返回true，否则返回false。
   * @param  {Array}  list     原数组
   * @param  {String} keyWord  查询的关键词
   * @return {Array}           查询的结果
   */
  function fuzzyQuery(list, keyWord) {
    
    
    var reg =  new RegExp(keyWord);
    var arr = [];
    for (var i = 0; i < list.length; i++) {
    
    
      if (reg.test(list[i])) {
    
    
        arr.push(list[i]);
      }
    }
    return arr;
  }

性能测试

测试条件：一个长度为100的数组，每个方法测试50次，取平均值。

indexof 方法耗费时间： 0.048ms
split 方法耗费时间： 0.037ms
match 方法耗费时间： 0.178ms
test 方法耗费时间： 0.039ms

总结：除了 match 方法，其他三个方法在性能上差不多。不过在这里有一点需要提出的就是， test 方法因为使用到了正则表达式，所以能够实现的功能会比较强大，写出来的代码也更加简洁。打个比方，在不区分大小写的模糊搜索条件下， test 方法只需在正则表达式中添加修饰符 i 即可实现不区分大小写new RegExp(keyWord, 'i')，而 indexof 方法和 split 方法则要通过多次的方法调用和逻辑运算符才能实现效果。

扫描二维码关注公众号，回复： 13303088 查看本文章

3.el-input绑定值仅限string/number

在这里插入图片描述
某次给value传了个数组报了以下错误，注意只能是string或者number类型

by the way : 学会条件断点

断点处右键选择edit breakpoints，出现输入框，输入条件，比如此处当msg包含String，Number时就会断点，输入msg.includes('String，Number')

4.el-dialog弹出框被遮罩层挡住了（详情点击）

在这里插入图片描述
解决办法：在el-dialog标签里添加 :modal-append-to-body=‘false’

实现效果：

5.表格悬浮提示

在这里插入图片描述

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column>
      <template v-slot="header">
        <span>姓名</span>
        <el-tooltip effect="light" content="提示文字" placement="bottom">
          <i class="el-icon-question"></i>
        </el-tooltip>
      </template>
      <template slot-scope="scope">
        <span style="margin-left: 10px">{
    
    {
    
     scope.row.name }}</span>
      </template>
    </el-table-column>
    <el-table-column prop="age" label="年龄"></el-table-column>
  </el-table>
</template>

1.第一个templete设置 slot=“header”，就是表头的内容；
第二个templete没有设置就是表格行的内容；
2.el-tooltip 的content设置悬浮显示的内容，span就是表头内容