Avue（ElementUI）给table的某一列设置样式，点击实现页面跳转

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

实际项目中要实现这样的效果，第二列字体颜色需要蓝色并且可点击，点击蓝色字体跳转到另一页面。

先来修改样式：

因为avue将element-ui进行了封装，所以直接改样式并不是特别方便。但当我们仔细阅读avue开发文档发现，在CRUD(表格)组件中发现了cell-class-name，它是单元格的className的回调方法，也可以使用字符串为所有单元格设置一个固定的className，用法：function({row,column,rowIndex,columnIndex})/String。
element-ui中的Table表格组件中也有同样的方法，用法也完全相同。

下面来看代码：

1. 在avue-crud组件中添加cell-class-name属性

2. 在js部分的methods中添加类名：

那么怎么才能找到我们想要添加样式的那一列呢？
控制台依次输出row,column,rowIndex,columnIndex后我们发现：

113行输出的是rowIndex，114行输出的是columnIndex。

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

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

此时让我们检查页面元素发现：

此时第二列已经添加了我们设定的类名，
下面就开始在设置样式吧：

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

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

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

1. 给avue-crud组件绑定cell-click方法：

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

pageto(row, column, cell, event){
   if(column.label=="水库名称"){
      this.$router.push({path: '/msgShow'})
   }
}

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