html 鼠标单击单元格,vue-easytable点击表格中某个单元格操作

一：vue-easytable的地址

http://doc.huangsw.com/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;

}

总结

以上是生活随笔为你收集整理的html 鼠标单击单元格,vue-easytable点击表格中某个单元格操作的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。