本文共 5664 字，大约阅读时间需要 18 分钟。

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

在elementui当中的表格提供了一个属性：cell-class-name 简单的描述就是对单元格进行添加一个class类名。

既然到这里可以给单元格添加类名，那么我们只需要在style当中给定对应的背景色等相关属性即可实现。

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

   		
        
           
        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,解决重复调用bugmyChart.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当中提供了相当不戳的图标，但是毕竟还是有限的，而在进行前端开发的时候，需要很多其他的图标，这个时候我们基本上都是在阿里图标库当中进行选择。那么我们又如何进行使用阿里里面的图标呢？

首先我们进行搜索我们需要的Icon图标，之后进行添加入库。

在右上方的购物车当中我们将选好的图标进行添加到项目，可以新建一个项目进行保存。 最后，在资源管理当中选择我的项目，选择你对应创建的项目之后，选择使用font class，之后点开下面的链接就会给出图标对应的css文件，我们将内容复制出来，在vue项目当中新建一个css文件进行保存。 最后就是图标的使用，我们在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表格还提供了树型结构，而使用到树形结构需要注意哪些问题呢？

而在进行使用的时候，我们的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里面的值进行解构得到参数，再进行调用。如下：

   
   // 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，而使用冒号+名字进行传值，接收的时候只能使用这个名字进行接收。并且接收值我们还需要给上数据类型。

// 组件传值
   // 子组件接收值props: {
   	value: {
   		type: Object,	},	roles: {
   		type: Array	}},

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

转载地址：http://ekqzi.baihongyu.com/