Vue和Elementui的一些小技巧和问题

快来打我* 2022-10-07 00:42 430阅读 0赞

### Vue和Elementui的一些小技巧和问题 ###

*   *  1、Elementui表格背景色设置方法
     *  2、Echarts单击事件重复调用问题
     *  3、使用IconFont图标
     *  4、使用自定义字体
     *  5、el-table tree 表格树相关问题
     *  6、链接跳转和携带参数问题
     *  7、Vue子组件开发

## 1、Elementui表格背景色设置方法 ##

在elementui当中的表格提供了一个属性：`cell-class-name` 简单的描述就是对单元格进行添加一个class类名。  
![在这里插入图片描述][20210615111230915.png]  
既然到这里可以给单元格添加类名，那么我们只需要在style当中给定对应的背景色等相关属性即可实现。

然后看一下对应的代码实现：看到方法实现，也就是对当前行传进来的数据的id值为1的时候，给当前单元格添加一个className，也就是给定对应的css属性值。

<el-table :data="tableData" :cell-class-name="addClass">
    		
        </el-table>
        
        
         addClass({ 
            row,
            column,
            rowIndex,
            columnIndex
          }) { 
            if (row.id == 1) { 
              return 'cell-red';
            }
          },
          
    	
      .cell-grey { 
        background: #ee4863;
      }
    
      .cell-red { 
        background: #983680;
      }

上面是一个比较普通的表格，然后后面的话就是对表格进行合并之后，不同的表格给定的背景色不一样，这又怎么处理呢？

还是采用相同的方法，我们只需要知道是根据哪一列进行合并的，然后这一个合并的单元格的数据进行判断即可，或者还有一个简单的方法，在单元格合并之后数据展示的话就会很多，我们可以给表格添加一个序号，有了这个序号之后就可以对2进行取余，和0进行比较，单双数返回不同的className即可。

最后就是一个鼠标移动到表格上，表格自动给定的颜色，我们可以修改对应的属性进行自定义颜色设置。

/* 选中某行时的背景色*/
      .el-table__body tr.current-row>td { 
        background-color: #ee4863 !important;
      }
    
      /*鼠标移入某行时的背景色*/
      .el-table--enable-row-hover .el-table__body tr:hover>td { 
        background-color: #ee4863;
      }

## 2、Echarts单击事件重复调用问题 ##

在开发的过程当中，使用Echar时出现了一些问题，给echarts绑定对应的单击事件之后，点击某一块却会触发多个单击事件，这着实让我有点懵逼。

解决起来也比较简单：

myChart.clear(); //绘制前先清空，解决不必要的烦恼！！
    myChart.setOption(this.kindOption);
    myChart.off('click'); //调用click前先用off,解决重复调用bug
    myChart.on("click", params => { 
    	const paramUrl = `?perilType=${ params.data.perilType}&tab=${ this.troubleTab}`;
    	window.open(`/web-zhwg-trouble/view/work-order-query.html${ paramUrl}`);
    });

## 3、使用IconFont图标 ##

Elementui当中提供了相当不戳的图标，但是毕竟还是有限的，而在进行前端开发的时候，需要很多其他的图标，这个时候我们基本上都是在阿里图标库[https://www.iconfont.cn/][https_www.iconfont.cn]当中进行选择。那么我们又如何进行使用阿里里面的图标呢？

首先我们进行搜索我们需要的Icon图标，之后进行添加入库。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0OTczMTU5_size_16_color_FFFFFF_t_70]  
在右上方的购物车当中我们将选好的图标进行添加到项目，可以新建一个项目进行保存。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0OTczMTU5_size_16_color_FFFFFF_t_70 1]  
最后，在资源管理当中选择我的项目，选择你对应创建的项目之后，选择使用font class，之后点开下面的链接就会给出图标对应的css文件，我们将内容复制出来，在vue项目当中新建一个css文件进行保存。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0OTczMTU5_size_16_color_FFFFFF_t_70 2]  
最后就是图标的使用，我们在vue文件当中将css文件引入：（地址根据自己本地而定）

import '../../common/iconfont.css'

导入之后进行使用直接加class类名即可。

## 4、使用自定义字体 ##

在页面当中有时为了适应主题，有些字体就需要使用自定义字体进行展示，在vue当中如何实现呢？

首选我们将字体文件ttf添加到项目当中。之后定义一个css文件进行读取这个静态字体文件。

@font-face {   
        font-family: 'LED';    // 给字体设置别名
        src: url('./FX-LED.ttf');  // 对应的路径
        font-weight: normal;  // 默认
        font-style: normal;   // 默认
      }

之后我们只需要在使用的vue文件当中，先导入刚才定义的css文件。

import '../../common/font.css'

之后定义对应的样式，这个时候我们就可以进行使用这个字体了，使用`class=“led”`即可

.led { 
    		font-family: LED;
    		font-size: 50px;
    		text-align: center;
    		align-items: center;
    		cursor: pointer;
    	}

## 5、el-table tree 表格树相关问题 ##

在elementui当中的el-table表格还提供了树型结构，而使用到树形结构需要注意哪些问题呢？  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0OTczMTU5_size_16_color_FFFFFF_t_70 3]  
而在进行使用的时候，我们的data数据要包含children和hasChild分别表示子节点数据和是否有子节点（显示图标），而通过lazy :load="load"可以进行数据懒加载，load方法就是对应子节点的数据进行加载，而el-table树表格组件在使用lazy :load="load"进行懒加载之后，而load方法需要带三个参数tree, treeNode, resolve分别是当前树、子树节点、懒加载数据添加方法，而懒加载在多次操作不会向数据库发请求获取数据，直接获取缓存数据，但是对子树节点进行操作之后，要对这个子树节点进行重新渲染，也就需要再调一次load方法，而load方法又要传参数进去，这三个参数也不能自己拼数据。这个时候就有点小尴尬。突然想到用一个map将这个参数先存起来，用的时候再取出来，也就是this.loadMap.set(tree.rowId, \{tree,treeNode,resolve\});将操作的子树节点唯一标识作为map的键，const \{tree,treeNode,resolve\} = this.loadMap.get(this.curRow.rowId); this.load(tree, treeNode, resolve)，在进行对子树重新渲染的时候，将子树id给到map，将map里面的值进行解构得到参数，再进行调用。如下：

<el-table ref="multipleTable" :data="tableData" style="width: 100%" height="100%" class="table"
    		header-cell-class-name="table-header" :tree-props="{ children: 'children', hasChildren: 'hasChildren' }" 
    		row-key="iRight" highlight-current-row border lazy :load="load" 
    		node-key="id" :default-expanded-keys="defaultShowNodes" :key="tableKey">
    </el-table>
    
    // key 值，用于重载列表
    tableKey: 1,
    // 获取懒加载的参数
    loadMap: new Map(),
    
    // 懒加载的方法
    load(tree, treeNode, resolve) { 
    	this.loadMap.set(tree.iRight, { 
    		tree,
    		treeNode,
    		resolve
    	})
    	console.log(this.loadMap)
    	// 请求省略，获取到接口返回的数据进行处理
    	tableSonData = data.data
    	// 处理之后的数据进行拼接回去
    	tree.children = tableSonData
    	resolve(tableSonData)
    },
    
    // 再次调用子节点获取数据方法主要代码
    const { 
    	tree,
    	treeNode,
    	resolve
    } = this.loadMap.get("这里就是set map 时给的主键")
    this.load(tree, treeNode, resolve)

然后上面的这种就是对子节点进行刷新处理，在我们对子节点进行新增、修改、删除操作之后，我们在前面的map当中存了值，在操作节点后，获取到那个值进行刷新就好了，但是后面遇到一个问题，那就是当最后一个子节点进行删除之后，但是页面上的节点还是会显示在上面，确实有点奇怪，在进行刷新这棵子树和刷新整个树都是解决不了，这不得不让我感到一丝懵逼，之后还是干脆就用vue当中的key对这个表格全部刷新一遍得了，首先我们给表格绑定一个key，如上代码所示：而后续的操作，我们都直接进行全部加载，也就直接调获取整个树的方法，在调完这个方法之后，:key绑定的值进行++操作。

/** 数据加载方法 */
    loadData() { 
    	// 发送请求获取数据，将数据给到列表...
    	this.tableData = data
    	this.tableKey++;
    },

## 6、链接跳转和携带参数问题 ##

在页面进行开发当中，不免会有链接跳转问题，而链接跳转还需要进行携带参数，这个时候我们使用的vue-router要这么做呢？我们给定一个方法，进行携带参数，之后将链接地址进行拼接。如下代码所示，链接得到之后我们将Search作为了一个对象进行传递，得到链接跳转地址和的地址：`/ordering/index?Search=%5Bobject%20Object%5D`，而我们在目标地址如何获取传递过来的值呢？我们使用`this.$route.query`就可以获取到链接是否携带了参数。进行后续业务操作

/** 单击跳转 */
          goto: function(Search) { 
            //查询跳转，判断这个Search的值是否得到item，得到之后进行跳转
            this.$router.push({ 
              path: '/ordering/index',
              //name:'/ordering/index',
              query: { 
                Search: Search
              }
            })
          },
          /** 跳转页面接收 */
          mounted() { 
          	//判断是不是由其他界面进来的，为null表示直接进行这个界面，则进行默认业务逻辑
          	if (this.$route.query.Search == null) { 
            	// 执行业务逻辑
          	}
         },
    
        	created: function() { 
          		//由报销界面进入，执行由报销界面传过来的值进行查询
         		window.that = this
          		let query = this.$route.query.Search
          		this.searchForm = query
         		// 获取参数 执行后续业务逻辑
        	},

## 7、Vue子组件开发 ##

在现阶段的开发过程当中，尤其是前端，都开始模块化，所以有很多地方相同的页面里面包含相同的页面，这个时候我们的子组件就显得格外的重要了，很大的程度上避免了时间的浪费，以及代码的冗余。下面就是我个人有关子组件的开发心得。

在最开始我也是所有的页面代码都写在同一个vue当中，这就会有很多的问题，比如说：行数特别多，很多东西定位不到，变量、方法进行命名也会比较混乱，主页面的vue不够清晰明了，这也是为什么要使用子组件。首先我们需要明白子组件的，其实就是主界面当中的某一块进行抽离出来使用一个新的vue进行保存，之后将这个vue引入到主页面即可。

第一个就是组件的引入：

// 引入对应的vue文件
    import role from "./component/role.vue";
    // 在components当中进行声明子组件，这样就可以进行使用了
    components: {  role },

直接使用`<role></role>`就可以用来表示组件了。但是我们的子组件不单单就是显示的功能，更多的还是父组件和子组件之间的值的传递。

第一个的话就是v-model指令，在前面的我们使用组件，对组件添加这个指令，使用v-model进行绑定值是双向的，也就是当子组件或者父组件其中某个组件的原因改变了绑定的值，对方都会进行改变。其次就是父组件向子组件进行传值，可以使用 `冒号+名字`进行表示传值。如下代码所示：首先第一个还是v-model进行传值，第二个就是通过上面说的进行传值，而在接收值的时候，我们使用props表示这些参数都是有父组件传递过来的，其中使用v-model绑定的值我们接收的变量基本上都是使用vale，而使用`冒号+名字`进行传值，接收的时候只能使用这个名字进行接收。并且接收值我们还需要给上数据类型。

// 组件传值
    <role v-model="curRoleRow" :role="curRoleRow" ></role>
    
    // 子组件接收值
    props: { 
    	value: { 
    		type: Object,
    	},
    	roles: { 
    		type: Array
    	}
    },

第二就是子组件的事件绑定，使用`this.$emit("方法名", 方法参数)`进行数据回传，这也就是我们的elementui当中进行事件绑定为什么要使用`@方法名`，这里也是同样的道理，我们的父组件进行使用绑定的事件，也需要使用`@方法名`，之后我们给其绑定一个函数，进行后续操作。

[20210615111230915.png]: /images/20221005/8fd1ebf0f9a14922be6b9d2154b5993d.png
[https_www.iconfont.cn]: https://www.iconfont.cn/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0OTczMTU5_size_16_color_FFFFFF_t_70]: /images/20221005/682d8bede7d641a0a2df98c9fbc68e32.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0OTczMTU5_size_16_color_FFFFFF_t_70 1]: /images/20221005/af0e67198da9447eacfe6097adb898d6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0OTczMTU5_size_16_color_FFFFFF_t_70 2]: /images/20221005/8ca20bc89e91430284ff2afe1d3db184.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0OTczMTU5_size_16_color_FFFFFF_t_70 3]: /images/20221005/e20f59f4a946483391c1272d76dc12b7.png