iview 表格添加十字交叉hover效果
注：此处使用jQuery 方式实现
思路如下:
找到表格中当前鼠标经过的td元素
添加鼠标经过和离开事件，注意要使用mouseenter和mouseleave，mouseover事件，只要鼠标在当前范围内移动会一直触发事件，具体参见菜鸟教程等。
- mouseover 事件在鼠标移动到选取的元素及其子元素上时触发 。
- mouseenter 事件只在鼠标移动到选取的元素上时触发。
找到父元素.ivu-table-row，给当前行添加样式，背景颜色等，鼠标离开事件则相反
找到每行tr的对应位置的td 设置样式
由于获取表格数据时可能存在异步操作，因此使用代理事件
image.png
image.png
具体代码如下：
$('.ivu-table-tbody').delegate('.ivu-table-column-center', 'mouseenter', function () {
let index = $(this).index();
$(this).parents('.ivu-table-row').siblings().each(function () {
$($(this).children()[index]).addClass('XXX');
})
}).delegate('.ivu-table-column-center', 'mouseleave', function () {
let index = $(this).index();
$(this).parents('.ivu-table-row').siblings().each(function () {
$($(this).children()[index]).removeClass('XX');
})
})
