el-tablevertical row怎么练把 row-key传到子页面

来源：蜘蛛抓取(WebSpider) 时间：2020-09-09 06:26 标签： vertical row怎么练

项目需要用到avueavue其实就是基于vue对element-ui進行了二次封装，所以方法也都基本一致

实际项目中要实现这样的效果，第二列字体颜色需要蓝色并且可点击点击蓝色字体跳转到另┅页面。
  1. 在js部分的methods中添加类名：

那么vertical row怎么练才能找到我们想要添加样式的那一列呢

[0,0]，[0,1][0,2]，[0,3]…分别代表[第一行,第一列][第一行,第二列]，[第┅行,第三列][第一行,第四列]，以此类推
那么当columnIndex=1时不就对应的是第二列吗？哈哈。

那就好办了开始给第二列添加特定类名：

此时让我們检查页面元素发现：
此时第二列已经添加了我们设定的类名，
下面就开始在设置样式吧：

这样就字体颜色就变成蓝色了

接下来让我们實现点击页面跳转：

这次要使用的是cell-click方法，当某个单元格被点击时会触发该事件

  1. 在js部分的methods中定义方法，实现跳转：（要先在router/index.js中定义要跳轉的路由路径哦）

这样就实现了点击蓝色字体实现页面跳转啦！！！

UI给出的设计图是这样的


要求点击運单号显示更多内容，

element里面给出的例子是有扩展符号的一列点击来展示

这里我想了下，把这一列隐藏起来了

然后点击的时候用rowClick 这个事件来进行展开这里也借鉴了下网上搜来的思路 

另外这是个Tab切换的表格，如果切换的时候要刷新表格，之前的排序要清空这里表上加仩了ref="multipleSelection"

我要回帖

更多关于 vertical row怎么练 的文章

 

随机推荐