VTable
VTable copied to clipboard
[Bug] filter plugin加载失败
Version
1.22.3
Link to Minimal Reproduction
vscreen
Steps to Reproduce
vtable 本地demo
import * as VTable from '@visactor/vtable';
import { bindDebugTool } from '@visactor/vtable/es/scenegraph/debug-tool';
import { FilterPlugin } from '../../src/filter';
const CONTAINER_ID = 'vTable';
/**
* 生成展示筛选功能的演示数据
* 包含各种类型的数据:文本、数值、日期、布尔值、颜色等
*/
const generateDemoData = (count: number) => {
const colors = ['#f5a623', '#7ed321', '#bd10e0', '#4a90e2', '#50e3c2', '#ff5a5f', '#000000'];
const departments = ['研发部', '市场部', '销售部', '人事部', '财务部', '设计部', '客服部', '运营部'];
return Array.from(new Array(count)).map((_, i) => {
const salary = Math.floor(5000 + Math.random() * 15000);
const sales = Math.floor(10000 + Math.random() * 90000);
const isSelected = i % 3 === 0;
const option = i === 1;
return {
id: i + 1,
name: `员工${i + 1}`,
gender: i % 2 === 0 ? '男' : '女',
salary,
sales,
seniority: Math.floor(Math.random() * (10 - 5 + 1)) + 5,
isFullTime: i % 5 !== 0,
department: departments[i % departments.length],
favoriteColor: colors[i % colors.length],
status: i % 3 === 0 ? '在职' : i % 3 === 1 ? '请假' : '离职',
isSelected,
option,
avatar:
'<svg width="24" height="24" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M24 44C35.0457 44 44 35.0457 44 24C44 12.9543 35.0457 4 24 4C12.9543 4 4 12.9543 4 24C4 35.0457 12.9543 44 24 44Z" fill="#' +
colors[i % colors.length].substring(1) +
'" stroke="#333" stroke-width="1"/></svg>'
};
});
};
export function createTable() {
const records = generateDemoData(50);
const columns: VTable.ColumnsDefine = [
{
field: 'id',
title: 'ID',
width: 60,
sort: true
},
{
field: 'name',
title: '姓名',
width: 120,
sort: true,
headerIcon: {
type: 'svg',
svg: '<svg width="24" height="24" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M24 44C35.0457 44 44 35.0457 44 24C44 12.9543 35.0457 4 24 4C12.9543 4 4 12.9543 4 24C4 35.0457 12.9543 44 24 44Z" fill="#ff5a5f" stroke="#333" stroke-width="1"/></svg>',
width: 20,
height: 20,
name: 'name-icon',
positionType: VTable.TYPES.IconPosition.absoluteRight,
marginRight: 30
}
},
{
field: 'gender',
title: '性别',
width: 100
},
// {
// field: 'avatar',
// title: '头像',
// width: 100,
// cellType: 'image',
// keepAspectRatio: true
// },
{
field: 'salary',
title: '薪资',
width: 120,
sort: true,
fieldFormat(record) {
return '¥' + record.salary;
}
},
{
field: 'sales',
title: '销售额',
width: 150,
sort: true,
fieldFormat(record) {
return '¥' + record.sales;
}
},
{
field: 'seniority',
title: '工龄',
width: 100,
sort: true
},
{
field: 'department',
title: '部门',
width: 100
},
// {
// field: 'favoriteColor',
// title: '喜好',
// width: 120,
// style: {
// bgColor: (args: any) => args.value
// }
// },
{
field: 'status',
title: '状态',
width: 120,
style: {
textAlign: 'center'
// color: (args: any) => {
// const { value } = args;
// if (value === '在职') {
// return '#7ed321';
// }
// if (value === '请假') {
// return '#f5a623';
// }
// return '#ff5a5f'; // 离职
// }
}
},
{
field: 'isSelected',
title: '选择',
width: 100,
cellType: 'checkbox'
},
{
field: 'option',
title: '选项',
width: 100,
cellType: 'radio'
}
];
const filterPlugin = new FilterPlugin({});
(window as any).filterPlugin = filterPlugin;
const option: VTable.ListTableConstructorOptions = {
// container: document.getElementById(CONTAINER_ID),
records,
columns,
padding: 10,
plugins: [filterPlugin]
};
// 初始化表格实例
const tableInstance = new VTable.ListTable({
container: document.getElementById(CONTAINER_ID),
plugins: [filterPlugin]
});
// 第一次更新
tableInstance.updateOption(option);
// 第二次更新
tableInstance.updateOption(option);
(window as any).tableInstance = tableInstance;
bindDebugTool(tableInstance.scenegraph.stage, {
customGrapicKeys: ['col', 'row']
});
}
Current Behavior
filter plugin未加载
Expected Behavior
filter plugin成功加载
Environment
- OS:
- Browser:
- Framework:
Any additional comments?
No response