Vue el-table表格第一列序号与复选框hover切换方式
作者：李泽举
这篇文章主要介绍了Vue el-table表格第一列序号与复选框hover切换方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
前言
项目中用vue element el-table
表格的第一列为鼠标经过时切换显示序号与复选框
不影响当前行的点击事件 , 如跳转详情等操作
老规矩,先上效果图
HTML
<el-table
ref="table"
:data="tableData"
style="width: 100%"
border
stripe
@cell-mouse-enter="cellEnter"
@cell-mouse-leave="cellLeave"
@selection-change="handleSelectionChange"
@row-click="toDeatils"
>
<el-table-column type="selection" width="50" align="left">
<template #default="{ row, $index }">
<div
v-if="columnCheckedId == row.id || checkedList[$index]"
@click.stop
>
<el-checkbox
v-model="checkedList[$index]"
@change="cellCheckbox(row, $index)"
></el-checkbox>
</div>
<span v-else>{{ $index + 1 }}</span>
</template>
</el-table-column>
<!-- 如有操作列 ↓-->
</el-table>JS
data() {
return {
columnCheckedId: '',
tableData: [], //table数据
multipleSelection: [], //table多选数据
checkedList: [], //table多选选中数据
}
},
methods:{
handleSelectionChange(val) {
this.multipleSelection = val
if (this.multipleSelection.length == this.tableData.length) {
this.multipleSelection.forEach((item, index) => {
this.checkedList[index] = true
})
}
if (this.multipleSelection.length == 0) {
this.checkedList = []
}
this.$emit('selectList', this.multipleSelection)
},
//鼠标移入表格当前行
cellEnter(row, column, cell, event) {
this.columnCheckedId = row.id
},
// 鼠标移出表格当前行
cellLeave(row, column, cell, event) {
this.columnCheckedId = ''
},
// 选中与否塞数据
cellCheckbox(row, index) {
if (this.checkedList[index]) {
this.$refs.table.toggleRowSelection(row, true)
} else {
this.$refs.table.toggleRowSelection(row, false)
}
},
}总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。