VueJS flexgrid에서 이미지 cell 의 이미지 크기를 조정하고 싶습니다.
페이지 정보
작성자 죠이러버 작성일 2024-03-26 23:00 조회 74회 댓글 0건본문
관련링크
flexgrid 의 특정 cell 에 이미지를 보여주려고 하는데요.
이미지가 너무 작게 나옵니다.
원래 샘플은 마우스를 가져가면 크게 보여주는 방식인 것 같은데요.
이미지 비율을 유지해서 일정크기의 폭으로 맞춰서 보여주고 싶습니다.
현재 아래와 같이 코드를 처리하고 있구요.
// obj에 아래와 같이 정보기입
if (obj.key == "F$Thumbnail") {
obj.cssClass = "cell-img";
obj.cellTemplate = CellMaker.makeImage({
label: "image for ${item.F_x0024_Name}",
width: "200px",
height: "200px",
click: (e, ctx) => alert("Clicked image for " + ctx.item.F_x0024_Name),
});
}
if (obj.key.toLowerCase() !== "urid") {
this.colInfo.push(obj);
}
colInfo 배열은 아래와 같이 wj-flex-grid-column 형태로 전달합니다.
<wj-flex-grid
:format-item="onFormatItem"
class="grid-box"
id="FlexGrid"
:allowDragging="false"
:autoSearch="true"
:itemsSource="data"
:isReadOnly="true"
:alternatingRowStep="0"
:initialized="flexInitialized"
:selectionMode="'Row'"
:loadedRows="onLoadedRows"
:child-items-path="treeChildItemsPath"
ref="normalGrid"
:selectionChanged="selectionChanged"
:style="sizeStyleHeightPxGrid"
>
<wj-flex-grid-column
v-for="item in colInfo"
:key="item.key"
:binding="item.binding"
:header="item.header"
:cssClass="item.cssClass"
:cellTemplate="item.cellTemplate"
></wj-flex-grid-column>
<wj-flex-grid-filter />
</wj-flex-grid>
style은 아래와 같이 적용해보았습니다.
<style lang="scss">
@import "../../../node_modules/@grapecity/wijmo.styles/wijmo.css";
.wj-flexgrid {
max-height: 300px;
.wj-cell {
padding: 6px 10px;
&.cell-img {
padding: 0;
text-align: center;
&:hover {
z-index: 3 !important;
overflow: visible;
img {
transform: scale(3) !important;
transition: all 600ms !important;
}
}
}
}
}
.container-fluid {
height: 100%;
}
.top-slot {
display: flex;
flex-direction: row-reverse;
flex-wrap: nowrap;
margin: 5px;
/* font-size: 0.8em; */
span {
font-size: 12px;
color: #6e768c;
}
}
/* .top-slot.showbutton {
min-height: 30px;
} */
.button-row {
min-height: 20px;
white-space: normal;
overflow: hidden;
}
.btn-action {
margin-right: 4px;
}
</style>
현재는 아래와 같이 보이고 있습니다. (Thumbnail 컬럼)
빨간색으로 표시한부분 이미지의 width를 해당 컬럼의 넓이 만큼 키우고 비율을 유지해서 표시하고 싶습니다.
어떻게 하면 되는지 방법을 알려주시면 감사하겠습니다.
답변 부탁드립니다.
댓글목록
등록된 댓글이 없습니다.