当鼠标移到行上显示气泡行上加旗袍

pull/11/head
liujun 2024-03-12 18:29:20 +08:00
parent 279bf3252d
commit 6cb2562112
6 changed files with 306 additions and 17 deletions

View File

@ -37,8 +37,9 @@
tooltip-effect="dark"
border
fit
highlight-current-row>
>
highlight-current-row
@cell-mouse-enter="enterSelectionRows"
@cell-mouse-leave="leaveSelectionRows">
<el-table-column
:reserve-selection="true"
type="selection"
@ -473,6 +474,53 @@ export default {
}).catch((e) => {
this.$message.success('添加失败')
})
},
enterSelectionRows(row, column, cell, event) {
console.log(row, 'row')
if (row.ISTOPTIME) {
this.createTips(event, row, '数据已置顶')
}
},
leaveSelectionRows(row, column, cell, event) {
if (row.ISTOPTIME) {
this.removeTips(row)
}
},
createTips(el, row, value) {
const { BUS_TEXT_LIBRARY_ID } = row
const tooltipDom = document.createElement('div')
tooltipDom.style.cssText = `
display: inline-block;
max-width: 400px;
max-height: 400px;
position: absolute;
top: ${el.clientY + 5}px;
left: ${el.clientX}px;
padding:5px 10px;
overflow: auto;
font-size: 12px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #595959;
background: #fff;
border-radius: 5px;
z-index: 19999;
box-shadow: 0 4px 12px 1px #ccc;
`
tooltipDom.innerHTML = value
tooltipDom.setAttribute('id', `tooltip-${BUS_TEXT_LIBRARY_ID}`)
// body
document.body.appendChild(tooltipDom)
},
removeTips(row) {
console.log(row, 'row')
const { BUS_TEXT_LIBRARY_ID } = row
const tooltipDomLeave = document.querySelectorAll(`#tooltip-${BUS_TEXT_LIBRARY_ID}`)
if (tooltipDomLeave.length) {
tooltipDomLeave.forEach(dom => {
document.body.removeChild(dom)
})
}
}
}
}

View File

@ -37,13 +37,15 @@
tooltip-effect="dark"
border
fit
highlight-current-row>
>
highlight-current-row
@cell-mouse-enter="enterSelectionRows"
@cell-mouse-leave="leaveSelectionRows">
<el-table-column
:reserve-selection="true"
type="selection"
width="55"
align="center"/>
align="center"
/>
<el-table-column type="index" label="序号" width="50" align="center" />
<el-table-column align="center" prop="REMARKS" label="安全操作规程名称" />
<el-table-column align="center" prop="TYPES" label="类型" >
@ -449,6 +451,53 @@ export default {
})
this.listLoading = false
})
},
enterSelectionRows(row, column, cell, event) {
console.log('row', row)
if (row.ISTOPTIME) {
this.createTips(event, row, '数据已置顶')
}
},
leaveSelectionRows(row, column, cell, event) {
if (row.ISTOPTIME) {
this.removeTips(row)
}
},
createTips(el, row, value) {
const { BUS_TEXT_LIBRARY_ID } = row
const tooltipDom = document.createElement('div')
tooltipDom.style.cssText = `
display: inline-block;
max-width: 400px;
max-height: 400px;
position: absolute;
top: ${el.clientY + 5}px;
left: ${el.clientX}px;
padding:5px 10px;
overflow: auto;
font-size: 12px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #595959;
background: #fff;
border-radius: 5px;
z-index: 19999;
box-shadow: 0 4px 12px 1px #ccc;
`
tooltipDom.innerHTML = value
tooltipDom.setAttribute('id', `tooltip-${BUS_TEXT_LIBRARY_ID}`)
// body
document.body.appendChild(tooltipDom)
},
removeTips(row) {
console.log(row, 'row')
const { BUS_TEXT_LIBRARY_ID } = row
const tooltipDomLeave = document.querySelectorAll(`#tooltip-${BUS_TEXT_LIBRARY_ID}`)
if (tooltipDomLeave.length) {
tooltipDomLeave.forEach(dom => {
document.body.removeChild(dom)
})
}
}
}
}

View File

@ -37,13 +37,15 @@
tooltip-effect="dark"
border
fit
highlight-current-row>
>
highlight-current-row
@cell-mouse-enter="enterSelectionRows"
@cell-mouse-leave="leaveSelectionRows">
<el-table-column
:reserve-selection="true"
type="selection"
width="55"
align="center"/>
align="center"
/>
<el-table-column type="index" label="序号" width="50" align="center" />
<el-table-column align="center" prop="REMARKS" label="安全生产管理制度名称" />
<el-table-column align="center" prop="TYPES" label="类型" >
@ -472,6 +474,52 @@ export default {
}).catch((e) => {
this.$message.success('添加失败')
})
},
enterSelectionRows(row, column, cell, event) {
if (row.ISTOPTIME) {
this.createTips(event, row, '数据已置顶')
}
},
leaveSelectionRows(row, column, cell, event) {
if (row.ISTOPTIME) {
this.removeTips(row)
}
},
createTips(el, row, value) {
const { BUS_TEXT_LIBRARY_ID } = row
const tooltipDom = document.createElement('div')
tooltipDom.style.cssText = `
display: inline-block;
max-width: 400px;
max-height: 400px;
position: absolute;
top: ${el.clientY + 5}px;
left: ${el.clientX}px;
padding:5px 10px;
overflow: auto;
font-size: 12px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #595959;
background: #fff;
border-radius: 5px;
z-index: 19999;
box-shadow: 0 4px 12px 1px #ccc;
`
tooltipDom.innerHTML = value
tooltipDom.setAttribute('id', `tooltip-${BUS_TEXT_LIBRARY_ID}`)
// body
document.body.appendChild(tooltipDom)
},
removeTips(row) {
console.log(row, 'row')
const { BUS_TEXT_LIBRARY_ID } = row
const tooltipDomLeave = document.querySelectorAll(`#tooltip-${BUS_TEXT_LIBRARY_ID}`)
if (tooltipDomLeave.length) {
tooltipDomLeave.forEach(dom => {
document.body.removeChild(dom)
})
}
}
}
}

View File

@ -37,13 +37,15 @@
tooltip-effect="dark"
border
fit
highlight-current-row>
>
highlight-current-row
@cell-mouse-enter="enterSelectionRows"
@cell-mouse-leave="leaveSelectionRows">
<el-table-column
:reserve-selection="true"
type="selection"
width="55"
align="center"/>
align="center"
/>
<el-table-column type="index" label="序号" width="50" align="center" />
<el-table-column align="center" prop="REMARKS" label="安全生产管理制度名称" />
<el-table-column align="center" prop="TYPES" label="类型" >
@ -449,6 +451,52 @@ export default {
})
this.listLoading = false
})
},
enterSelectionRows(row, column, cell, event) {
if (row.ISTOPTIME) {
this.createTips(event, row, '数据已置顶')
}
},
leaveSelectionRows(row, column, cell, event) {
if (row.ISTOPTIME) {
this.removeTips(row)
}
},
createTips(el, row, value) {
const { BUS_TEXT_LIBRARY_ID } = row
const tooltipDom = document.createElement('div')
tooltipDom.style.cssText = `
display: inline-block;
max-width: 400px;
max-height: 400px;
position: absolute;
top: ${el.clientY + 5}px;
left: ${el.clientX}px;
padding:5px 10px;
overflow: auto;
font-size: 12px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #595959;
background: #fff;
border-radius: 5px;
z-index: 19999;
box-shadow: 0 4px 12px 1px #ccc;
`
tooltipDom.innerHTML = value
tooltipDom.setAttribute('id', `tooltip-${BUS_TEXT_LIBRARY_ID}`)
// body
document.body.appendChild(tooltipDom)
},
removeTips(row) {
console.log(row, 'row')
const { BUS_TEXT_LIBRARY_ID } = row
const tooltipDomLeave = document.querySelectorAll(`#tooltip-${BUS_TEXT_LIBRARY_ID}`)
if (tooltipDomLeave.length) {
tooltipDomLeave.forEach(dom => {
document.body.removeChild(dom)
})
}
}
}
}

View File

@ -37,13 +37,15 @@
tooltip-effect="dark"
border
fit
highlight-current-row>
>
highlight-current-row
@cell-mouse-enter="enterSelectionRows"
@cell-mouse-leave="leaveSelectionRows">
<el-table-column
:reserve-selection="true"
type="selection"
width="55"
align="center"/>
align="center"
/>
<el-table-column type="index" label="序号" width="50" align="center" />
<el-table-column align="center" prop="REMARKS" label="安全生产责任制名称" />
<el-table-column align="center" prop="TYPES" label="类型" >
@ -472,6 +474,52 @@ export default {
}).catch((e) => {
this.$message.success('添加失败')
})
},
enterSelectionRows(row, column, cell, event) {
if (row.ISTOPTIME) {
this.createTips(event, row, '数据已置顶')
}
},
leaveSelectionRows(row, column, cell, event) {
if (row.ISTOPTIME) {
this.removeTips(row)
}
},
createTips(el, row, value) {
const { BUS_TEXT_LIBRARY_ID } = row
const tooltipDom = document.createElement('div')
tooltipDom.style.cssText = `
display: inline-block;
max-width: 400px;
max-height: 400px;
position: absolute;
top: ${el.clientY + 5}px;
left: ${el.clientX}px;
padding:5px 10px;
overflow: auto;
font-size: 12px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #595959;
background: #fff;
border-radius: 5px;
z-index: 19999;
box-shadow: 0 4px 12px 1px #ccc;
`
tooltipDom.innerHTML = value
tooltipDom.setAttribute('id', `tooltip-${BUS_TEXT_LIBRARY_ID}`)
// body
document.body.appendChild(tooltipDom)
},
removeTips(row) {
console.log(row, 'row')
const { BUS_TEXT_LIBRARY_ID } = row
const tooltipDomLeave = document.querySelectorAll(`#tooltip-${BUS_TEXT_LIBRARY_ID}`)
if (tooltipDomLeave.length) {
tooltipDomLeave.forEach(dom => {
document.body.removeChild(dom)
})
}
}
}
}

View File

@ -37,13 +37,15 @@
tooltip-effect="dark"
border
fit
highlight-current-row>
>
highlight-current-row
@cell-mouse-enter="enterSelectionRows"
@cell-mouse-leave="leaveSelectionRows">
<el-table-column
:reserve-selection="true"
type="selection"
width="55"
align="center"/>
align="center"
/>
<el-table-column type="index" label="序号" width="50" align="center" />
<el-table-column align="center" prop="REMARKS" label="安全生产管理制度名称" />
<el-table-column align="center" prop="TYPES" label="类型" >
@ -449,6 +451,52 @@ export default {
})
this.listLoading = false
})
},
enterSelectionRows(row, column, cell, event) {
if (row.ISTOPTIME) {
this.createTips(event, row, '数据已置顶')
}
},
leaveSelectionRows(row, column, cell, event) {
if (row.ISTOPTIME) {
this.removeTips(row)
}
},
createTips(el, row, value) {
const { BUS_TEXT_LIBRARY_ID } = row
const tooltipDom = document.createElement('div')
tooltipDom.style.cssText = `
display: inline-block;
max-width: 400px;
max-height: 400px;
position: absolute;
top: ${el.clientY + 5}px;
left: ${el.clientX}px;
padding:5px 10px;
overflow: auto;
font-size: 12px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #595959;
background: #fff;
border-radius: 5px;
z-index: 19999;
box-shadow: 0 4px 12px 1px #ccc;
`
tooltipDom.innerHTML = value
tooltipDom.setAttribute('id', `tooltip-${BUS_TEXT_LIBRARY_ID}`)
// body
document.body.appendChild(tooltipDom)
},
removeTips(row) {
console.log(row, 'row')
const { BUS_TEXT_LIBRARY_ID } = row
const tooltipDomLeave = document.querySelectorAll(`#tooltip-${BUS_TEXT_LIBRARY_ID}`)
if (tooltipDomLeave.length) {
tooltipDomLeave.forEach(dom => {
document.body.removeChild(dom)
})
}
}
}
}