一：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点击表格中某个单元格操作的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。