一：vue-easytable的地址
/vue-easytable/app.html#/table/hideTable
二：改变当前鼠标悬浮单元格的样式
1、添加:column-cell-class-name="columnCellClass"，下面是具体的案例
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;
}
