ThbTech/FileManage
1
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects 1 Releases Wiki Activity

表格预览样式改到全局样式里面

Browse Source
This commit is contained in:
wangxk 2025-03-31 09:27:22 +08:00
parent 2520417014
commit 0cbcc6a7e0
2 changed files with 110 additions and 109 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

111
web/src/components/textEditing/txtexl.vue
View File

@ -189,9 +189,9 @@ const handleEdit = (rowIndex, colIndex, event) => {
const newValue1 = event.target.value.trim();
if (newValue1 !== oldValue) {
console.log(`修改了第${rowIndex + 1}行第${colIndex + 1}列`,`旧值: ${oldValue} => 新值: ${newValue1}`);
console.log(`修改了第${rowIndex + 1}行第${colIndex + 1}列`, `旧值: ${oldValue} => 新值: ${newValue1}`);
rawData[rowIndex][colIndex] = newValue1; // 手动更新保证数据同步
tabledata.value.push({lineNum:rowIndex + 1,colNum:colIndex + 1,newValue:newValue1})
tabledata.value.push({ lineNum: rowIndex + 1, colNum: colIndex + 1, newValue: newValue1 })
// debugger
}
};
@ -212,112 +212,5 @@ const saveChanges = () => {
</script>
<style>
.text-viewer {
width: 100%;
/* max-width: 1200px; */
margin: 0 auto;
.edit-input {
width: 100%;
height: 100%;
border: none;
outline: none;
padding: 0 12px;
background: transparent;
text-align: center;
}
.edit-input:focus {
background: #f0f9ff;
box-shadow: 0 0 0 1px #409eff inset;
}
.scroll-container {
position: relative;
overflow: auto;
border: 1px solid #ddd;
}
.phantom {
position: relative;
}
.row {
position: absolute;
min-width: 100%;
/* 保证最小宽度与容器一致 */
height: v-bind(ROW_HEIGHT + 'px');
display: flex;
align-items: center;
border-bottom: 1px solid #eee;
border-right: 1px solid #eee;
box-sizing: border-box;
}
.cell {
flex: 1 0 auto;
/* 允许单元格根据内容扩展 */
min-width: 160px;
/* 设置最小宽度防止挤压 */
padding: 0 12px;
white-space: nowrap;
overflow: visible;
/* 显示完整内容 */
position: relative;
text-align: center;
}
.cell+.cell {
border-left: 1px solid #f0f0f0;
}
.scroll-container::-webkit-scrollbar {
width: 8px;
height: 8px;
}
.scroll-container::-webkit-scrollbar-thumb {
background-color: #c1c1c1;
border-radius: 4px;
}
.loading {
padding: 10px;
background: #f5f5f5;
text-align: center;
}
.error {
color: #ff4444;
padding: 20px;
text-align: center;
}
}
/* 添加全屏样式 */
.text-viewer.full-screen {
position: fixed;
top: 0;
left: 0;
z-index: 9999;
background: white;
width: 100vw;
height: 100vh;
}
.controls {
position: absolute;
bottom: 0px;
right: 0px;
z-index: 10000;
}
button {
padding: 8px 16px;
background: #409eff;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}
</style>

108
web/src/styles/index.scss
View File

@ -126,3 +126,111 @@ svg{
.hover-row.is_sightedbg td.el-table__cell{
background: rgb(254, 218, 121) !important;
}
.text-viewer {
width: 100%;
/* max-width: 1200px; */
margin: 0 auto;
.edit-input {
width: 100%;
height: 100%;
border: none;
outline: none;
padding: 0 12px;
background: transparent;
text-align: center;
}
.edit-input:focus {
background: #f0f9ff;
box-shadow: 0 0 0 1px #409eff inset;
}
.scroll-container {
position: relative;
overflow: auto;
border: 1px solid #ddd;
}
.phantom {
position: relative;
}
.row {
position: absolute;
min-width: 100%;
/* 保证最小宽度与容器一致 */
height: v-bind(ROW_HEIGHT + 'px');
display: flex;
align-items: center;
border-bottom: 1px solid #eee;
border-right: 1px solid #eee;
box-sizing: border-box;
}
.cell {
flex: 1 0 auto;
/* 允许单元格根据内容扩展 */
min-width: 160px;
/* 设置最小宽度防止挤压 */
padding: 0 12px;
white-space: nowrap;
overflow: visible;
/* 显示完整内容 */
position: relative;
text-align: center;
}
.cell+.cell {
border-left: 1px solid #f0f0f0;
}
.scroll-container::-webkit-scrollbar {
width: 8px;
height: 8px;
}
.scroll-container::-webkit-scrollbar-thumb {
background-color: #c1c1c1;
border-radius: 4px;
}
.loading {
padding: 10px;
background: #f5f5f5;
text-align: center;
}
.error {
color: #ff4444;
padding: 20px;
text-align: center;
}
/* 添加全屏样式 */
.full-screen {
position: fixed;
top: 0;
left: 0;
z-index: 9999;
background: white;
width: 100vw;
height: 100vh;
}
.controls {
position: absolute;
bottom: 0px;
right: 0px;
z-index: 10000;
}
button {
padding: 8px 16px;
background: #409eff;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}
}