基本需求场景：使用Vue2实现一个自定义的Switch Button组件，并且在使用时要求父子组件能相互通信。使用到的技术主要是vue2和element-ui。

在二次开发猪齿鱼时，choerodon-front依赖@choerodon/master,@choerodon/master又依赖choerodon-ui，我们用到的版本是1.3.2-beta.3版本，而这个版本的choerodon-ui存在一个bug需要修复。本文记录修改过程和踩坑

背景

在vue中只要用到子组件就会涉及到父子组件的传值，以下面这个例子为引导，记录Vue中父子组件的通信传值问题，防遗忘。为了简洁只记录一种最为常用的方式。其它方式可以参考文末的参考文章。

使用vant提供的van-popup组件时，默认样式不满足项目需求，需要自定义。我们就对van-popup进行二次封装其中会用到父子组件传值。

父组件给子组件传值

问题重现

后台接口定义：

@POST
@Path(value = "/finishOrder")
@Produces("application/json")
@Consumes("application/json")
public Result finishOrder(@HeaderParam(Const.TOKEN) String token, List<Order> orderlist,@QueryParam("hasSix") String hasSix) {
  // ... 
}

问题描述

Vue项目中，需要给el-table表格中的每一行加入自定义的样式，根据文档给组件加上row-class-name属性即可，直接加入该属性并且在当前Vue组件中配置对应class的样式发现并没有生效。官方文档地址： https://element.eleme.cn/#/zh-CN/component/table

在Element-UI中，row-class-name、row-style、cell-class-name等属性设置的css样式必须使用全局style样式才能生效。

前言

基本需求场景：使用层次分析法（AHP）时，需要前端实现一个可动态添加表格行列、且单元格可编辑的表格。关于层次分析法可查看另一篇博客：层次分析法（AHP）分析步骤与计算方法

使用到的技术主要是vue和element-ui，element-ui官方文档：https://element.eleme.cn/#/zh-CN/component/table 中el-table组件不支持动态增加列，增加行则可以通过增加数据行实现，并且并不支持单元格的编辑，唯一可用到的就是可以监听单元格的双击/单击事件。

问题场景

• LayUI版本：layui-v2.4.5

  在使用layui table实现搜索按钮（完整代码见附1）时，重载表格请求的额外参数不清空，上一次的字段还会出现的问题。这个问题的表现为，请求第一次选择姓名字段，发送请求：page=1&limit=10&userName=%E5%B0%E4%BB%A5%E6%8D，重新选择索引字段为电话后，发送请求：page=1&limit=10&userName=%E5%B0%E4%BB%A5%E6%8D&phoneNumber=176，即多次请求重载表格，出现之前重载表格时额外参数(where{})不清空，导致请求字段不刷新，无法搜索到结果。见下图：

最终显示效果

实现效果

需求简介：根据用户状态值（0或1），显示不同颜色的原点表示任务状态，并将状态值显示为中文。如图：

服务器返回数据

页面显示效果

实现步骤

单元格图标颜色

需要使用slot-scope获取到单元格数据，使其根据数据动态设置Class值。

问题重现

在前后端分离项目中，后端使用Shiro做权限管理，前端使用Vue展示，在使用axios进行数据交换时，axios不带cookie，导致前台登录成功后无法发送第二次请求（Session失效），要求用户进行再次登录。

我们知道后台的session需要前后端共同维持，前端每次请求都要开启Cookie发送JSESSIONID给后端，后端才能够确认本次请求是否与上一次请求会话相同。

axios默认不开启Cookie，导致每次请求会话过期。

问题解决

1、设置axios请求带上Cookies