vue-easytable点击表格中某个单元格操作_vxe-easy

一：vue-easytable的地址

http://doc.huangsw.com/vue-easytable/app.html#/table/hideTable

二：改变当前鼠标悬浮单元格的样式

1、添加:column-cell-class-name="columnCellClass"，下面是具体的案例

<v-table 
  is-horizontal-resize 
  style="width:100%" 
  :columns="columns" 
  :table-data="tableData" 
  :row-click="rowClick" 
  :column-cell-class-name="columnCellClass" 
  row-hover-color="#eee" 
  row-click-color="#edf7ff" >
</v-table>

2、添加方法

//设置class
columnCellClass(rowIndex,columnName,rowData){

  // 给三行column为‘Parts1Material’和‘Parts2Material’的列设置className
   /*根据你自己的cloumn设置*/
  if (columnName==='Parts1Material'||columnName==='Parts2Material'){
    return 'column-cell-class-name-cailiao';//这是你的css名字
  }
}

3、设置css样式

.column-cell-class-name-cailiao .v-table-body-cell:hover{
  color: white;
  background-color: darkmagenta;
  text-underline: gold;
  cursor: pointer;
}
.column-cell-class-name-cailiao .v-table-body-cell:hover span{
  border-bottom: 1px solid white;
}

4、查看效果

5、设置点击事件

//点击当前行事件
rowClick(rowIndex,rowData,column){
  //通过cloumn来判断点击的是哪个
  if(column.field=='Parts1Material'||column.field=='Parts2Material'){
    
    //再用vuex来临时存储当前点击的内容
    this.changeMaterial(rowData[column.field]);
    //跳转路由到其他页面并使用
    this.$router.push("/generaltechonology/generalmaterialtable");
  }
},

到这里已经完成了vue-easytable点击表格中某个单元格的操作，请灵活运用。

@media screen and (min-width: 60em)
.single .hentry .entry-content {
width: calc(80.5% - 25px) !important;
}