VTable
VTable copied to clipboard
[Bug]设置某些列单元格不可选中后,点击这些单元格,SELECTED_CLEAR 事件未触发
复现步骤:
-
打开官网示例 官网示例-选择单元格
-
使用如下代码
let tableInstance;
fetch('https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/North_American_Superstore_data.json')
.then(res => res.json())
.then(data => {
const columns = [
{
field: 'Order ID',
title: 'Order ID',
width: 'auto'
},
{
field: 'Customer ID',
title: 'Customer ID',
width: 'auto'
},
{
field: 'Product Name',
title: 'Product Name',
width: 'auto',
// 设置单元格不可选中
disableSelect: true,
},
{
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: data,
columns,
widthMode: 'standard',
keyboardOptions: {
selectAllOnCtrlA: true,
copySelected: true
},
theme: VTable.themes.ARCO.extends({
selectionStyle: {
cellBorderLineWidth: 2,
cellBorderColor: '#9900ff',
cellBgColor: 'rgba(153,0,255,0.2)'
}
})
};
tableInstance = new VTable.ListTable(document.getElementById(CONTAINER_ID), option);
tableInstance.on('selected_cell', (...args) => alert('SELECTED_CELL'));
tableInstance.on('selected_clear', (...args) => alert('SELECTED_CLEAR'));
window['tableInstance'] = tableInstance;
});
-
上述代码给 Product Name 列设置了单元格不可选中,监听了 selected_cell 和 selected_clear 事件
-
在表格上随意选中一个其他列的单元格,此时会有 selected_cell 的 alert 信息,然后再点击 Product Name 列的单元格,此时表格上不再有选中状态,但是 selected_clear 事件并未触发
期望此时可以触发 selected_clear 事件