VTable
VTable copied to clipboard
VisActor
[Help] 插入的dom中的滚动条，无法触发滚动，只会触发表格的
Version
1.5.3
Link to Minimal Reproduction
https://codesandbox.io/p/sandbox/tender-thunder-xfqh4w?file=%2Fsrc%2Findex.html
Steps to Reproduce
- 点击顶部漏斗图标
- 滚动弹出的span list
- list无法滚动，触发表格滚动
import "./styles.css";
import { ListTable, register, TYPES } from "@visactor/vtable";
register.icon("filter", {
name: "filter",
type: "svg",
width: 20,
height: 20,
marginRight: 6,
positionType: TYPES.IconPosition.right,
// interactive: true,
svg: '<svg t="1707378931406" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1587" width="200" height="200"><path d="M741.248 79.68l-234.112 350.08v551.488l55.296 24.704v-555.776l249.152-372.544c8.064-32.96-10.496-59.712-41.152-59.712h-709.248c-30.464 0-49.28 26.752-41.344 59.712l265.728 372.544v432.256l55.36 24.704v-478.592l-248.896-348.864h649.216z m-68.032 339.648c0-16.832 12.096-30.592 27.264-30.848h277.888c15.232 0 27.712 13.824 27.712 30.848s-12.416 30.848-27.712 30.848h-277.888c-15.168-0.32-27.264-14.016-27.264-30.848z m0 185.216c0-16.832 12.096-30.592 27.264-30.848h277.888c15.232 0 27.712 13.824 27.712 30.848s-12.416 30.848-27.712 30.848h-277.888c-15.168-0.256-27.264-14.016-27.264-30.848z m0 185.28c0-16.832 12.096-30.592 27.264-30.848h277.888c15.232 0 27.712 13.824 27.712 30.848s-12.416 30.848-27.712 30.848h-277.888c-15.168-0.32-27.264-13.952-27.264-30.848z" p-id="1588"></path></svg>',
});
register.icon("filtered", {
name: "filtered",
type: "svg",
width: 20,
height: 20,
marginRight: 6,
positionType: TYPES.IconPosition.right,
// interactive: true,
svg: '<svg t="1707378931406" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1587" width="200" height="200"><path d="M741.248 79.68l-234.112 350.08v551.488l55.296 24.704v-555.776l249.152-372.544c8.064-32.96-10.496-59.712-41.152-59.712h-709.248c-30.464 0-49.28 26.752-41.344 59.712l265.728 372.544v432.256l55.36 24.704v-478.592l-248.896-348.864h649.216z m-68.032 339.648c0-16.832 12.096-30.592 27.264-30.848h277.888c15.232 0 27.712 13.824 27.712 30.848s-12.416 30.848-27.712 30.848h-277.888c-15.168-0.32-27.264-14.016-27.264-30.848z m0 185.216c0-16.832 12.096-30.592 27.264-30.848h277.888c15.232 0 27.712 13.824 27.712 30.848s-12.416 30.848-27.712 30.848h-277.888c-15.168-0.256-27.264-14.016-27.264-30.848z m0 185.28c0-16.832 12.096-30.592 27.264-30.848h277.888c15.232 0 27.712 13.824 27.712 30.848s-12.416 30.848-27.712 30.848h-277.888c-15.168-0.32-27.264-13.952-27.264-30.848z" p-id="1588" fill="#1296db"></path></svg>',
});
let tableInstance = null;
const columns = [
{
field: "isCheck",
title: "",
width: 60,
headerType: "checkbox",
cellType: "checkbox",
},
{
field: "Order ID",
title: "Order ID",
width: "auto",
sort: true, // 使用内置默认排序逻辑
},
{
field: "Customer ID",
title: "Customer ID",
width: "auto",
headerIcon: "filter",
},
{
field: "Product Name",
title: "Product Name",
width: "auto",
headerIcon: "filter",
},
{
field: "Category",
title: "Category",
width: "auto",
},
{
field: "Sub-Category",
title: "Sub-Category",
width: "auto",
},
{
field: "Region",
title: "Region",
width: "auto",
},
{
field: "City",
title: "City",
width: "auto",
},
{
field: "Order Date",
title: "Order Date",
width: "auto",
},
{
field: "Quantity",
title: "Quantity",
width: "auto",
},
{
field: "Sales",
title: "Sales",
width: "auto",
},
{
field: "Profit",
title: "Profit",
width: "auto",
},
];
const option = {
records: [],
columns,
widthMode: "standard",
keyboardOptions: {
selectAllOnCtrlA: true,
copySelected: true,
},
// overscrollBehavior: 'none',
select: {
highlightMode: "row",
},
legends: {
discrete: {
filter: true,
},
},
};
fetch(
"https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/North_American_Superstore_data.json"
)
.then((res) => res.json())
.then((data) => {
option.records = data;
console.log("option", option);
tableInstance = new ListTable(
document.getElementById("listTableRef"),
option
);
console.log("tableInstance", tableInstance);
let filterContainer = tableInstance.getElement();
console.log(filterContainer);
tableInstance.on("icon_click", (args) => {
const { col, row, name } = args;
const positonRect = tableInstance.getCellRelativeRect(col, row);
if (name === "filter") {
const wrapper = document.createElement("div");
wrapper.style.position = "absolute";
wrapper.style.padding = "4px";
wrapper.style.width = "100%";
wrapper.style.boxSizing = "border-box";
wrapper.style.background = "#fff";
wrapper.style.top = positonRect.top + positonRect.height + "px";
wrapper.style.left = positonRect.left + "px";
wrapper.style.width = 300 + "px";
wrapper.style.height = 300 + "px";
let checkboxHtml = ``;
let i = 0;
while (++i <= 10) {
checkboxHtml += `<p><input type="checkbox"><span>span${i}<span/></p>`;
}
wrapper.innerHTML = `
<div><input /></div>
<div>
<span>全选</span>
<span>取消全选</span>
</div>
<div class="scroller" style="overflow-y:scroll;max-height:100px">
${checkboxHtml}
</div>
<div>
<button>重置</button>
<button>确定</button>
</div>
`;
filterContainer.appendChild(wrapper);
}
});
});
Current Behavior
Expected Behavior
期望是只滚动插入dom中的滚动条
Environment
- OS:
- Browser:chrome 126.0.6478.127
- Framework:
Any additional comments?
No response
