Element-UI中实现可动态增加行列和可编辑单元格的表格

前言

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

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


ycyin大约 5 分钟前端技术VueAHPElement-UIel-table动态表格
获取el-table单元格值并根据该值对元素自定义样式渲染

最终显示效果

实现效果

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

服务器返回数据

页面显示效果

实现步骤

单元格图标颜色

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

<el-table-column
  prop="state"
  label="用户状态">
  <template slot-scope="scope">
    <i :class="addclassStatus(scope.row.state)"></i>
    {{scope.row.state | formatSatate}}
  </template>
</el-table-column>

ycyin大约 1 分钟前端技术Vue
解决前后端分离项目中Vue不带cookies的问题

问题重现

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

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

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

问题解决

1、设置axios请求带上Cookies


ycyin大约 1 分钟前端技术VueCookies
Vue+SSM中使用Token验证登录

JWT(JSON Web Token)

前后端分离模式下(跨域),传统的Web验证方式大多数情况使用Session。即每一个用户登录后创建一个Session会话,服务端维持这个Session的状态,在这种模式下的最大缺点是,如果没有分布式架构则无法支持横向扩展,并且当用户量大时,服务器负载量太大。

面对上述问题,一种灵活的解决方案就是通过客户端保存数据,而服务器根本不保存会话数据,每个请求都被发送回服务器。 JWT是这种解决方案的代表。 当用户与服务器通信时,客户在请求中发回JSON对象(Token)。服务器仅依赖于这个JSON对象来标识用户。为了防止用户篡改数据,服务器将在生成对象时添加签名。服务器不保存任何会话数据,即服务器变为无状态,使其更容易扩展。


ycyin大约 3 分钟SpringVueSSMJWT