125 lines
2.6 KiB
TypeScript
125 lines
2.6 KiB
TypeScript
import type { MetaContainerItem } from 'open-data-v/base'
|
|
import { ComponentGroup, CustomComponent, DataMode, FormType } from 'open-data-v/base'
|
|
import { h, shallowRef } from 'vue'
|
|
|
|
import ScrollTableForm from './Form.vue'
|
|
|
|
export const componentName = 'ScrollTable'
|
|
class ScrollTableComponent extends CustomComponent {
|
|
constructor(id?: string, name?: string, icon?: string) {
|
|
super({
|
|
component: componentName,
|
|
group: ComponentGroup.TABLE,
|
|
name: name ? name : '滚动表格',
|
|
id,
|
|
width: 400,
|
|
height: 100,
|
|
icon,
|
|
dataMode: DataMode.UNIVERSAL
|
|
})
|
|
}
|
|
|
|
_prop: MetaContainerItem[] = [
|
|
{
|
|
label: '表头',
|
|
prop: 'header',
|
|
children: [
|
|
{
|
|
prop: 'header',
|
|
label: '表头数据',
|
|
type: FormType.ARRAY,
|
|
props: {
|
|
type: 'dynamic',
|
|
defaultValue: ['姓名', '年龄', '性别']
|
|
}
|
|
},
|
|
{
|
|
prop: 'headerBGC',
|
|
label: '背景色',
|
|
type: FormType.COLOR,
|
|
props: {
|
|
defaultValue: '#00BAFF'
|
|
}
|
|
},
|
|
{
|
|
prop: 'headerHeight',
|
|
label: '高度',
|
|
type: FormType.NUMBER,
|
|
props: {
|
|
defaultValue: 35,
|
|
suffix: () => h('span', {}, 'px')
|
|
}
|
|
},
|
|
{
|
|
prop: 'index',
|
|
label: '是否显示索引',
|
|
type: FormType.SWITCH,
|
|
props: {
|
|
defaultValue: false
|
|
}
|
|
},
|
|
{
|
|
prop: 'indexHeader',
|
|
label: '索引显示',
|
|
type: FormType.TEXT,
|
|
props: {
|
|
defaultValue: '#'
|
|
}
|
|
}
|
|
]
|
|
},
|
|
{
|
|
label: '行设置',
|
|
prop: 'rows',
|
|
children: [
|
|
{
|
|
prop: 'data',
|
|
label: '行配置',
|
|
type: FormType.CUSTOM,
|
|
showLabel: false,
|
|
props: {
|
|
componentType: shallowRef(ScrollTableForm),
|
|
defaultValue: {
|
|
height: 30,
|
|
oddRowBGC: '#003B51',
|
|
evenRowBGC: '#0A2732'
|
|
}
|
|
}
|
|
}
|
|
]
|
|
}
|
|
]
|
|
|
|
get exampleData() {
|
|
return [
|
|
{
|
|
name: '张三',
|
|
age: 23,
|
|
sex: '男'
|
|
},
|
|
{
|
|
name: '张三',
|
|
age: 23,
|
|
sex: '男'
|
|
},
|
|
{
|
|
name: '张三',
|
|
age: 23,
|
|
sex: '男'
|
|
},
|
|
{
|
|
name: '张三',
|
|
age: 23,
|
|
sex: '男'
|
|
},
|
|
{
|
|
name: '张三',
|
|
age: 23,
|
|
sex: '男'
|
|
}
|
|
]
|
|
}
|
|
}
|
|
|
|
export default ScrollTableComponent
|