vxe-table 表格组件简单使用
1.效果展示
2.代码
配置文件
options.js
export const FlinkColumnDataType = [
{
"label": "char",
"value": "char",
"methodsName": "CHAR",
"code": 1,
"name": "char",
"displayName": ""
},
{
"label": "varchar",
"value": "varchar",
"methodsName": "VARCHAR",
"code": 2,
"name": "varchar",
"displayName": ""
},
{
"label": "string",
"value": "string",
"methodsName": "STRING",
"code": 3,
"name": "string",
"displayName": ""
},
{
"label": "boolean",
"value": "boolean",
"methodsName": "BOOLEAN",
"code": 4,
"name": "boolean",
"displayName": ""
},
{
"label": "bytes",
"value": "bytes",
"methodsName": "BYTES",
"code": 5,
"name": "bytes",
"displayName": ""
},
{
"label": "decimal",
"value": "decimal",
"methodsName": "DECIMAL",
"code": 6,
"name": "decimal",
"displayName": ""
},
{
"label": "tinyint",
"value": "tinyint",
"methodsName": "TINYINT",
"code": 7,
"name": "tinyint",
"displayName": ""
},
{
"label": "smallint",
"value": "smallint",
"methodsName": "SMALLINT",
"code": 8,
"name": "smallint",
"displayName": ""
},
{
"label": "integer",
"value": "integer",
"methodsName": "INTEGER",
"code": 9,
"name": "integer",
"displayName": ""
},
{
"label": "bigint",
"value": "bigint",
"methodsName": "BIGINT",
"code": 10,
"name": "bigint",
"displayName": ""
},
{
"label": "float",
"value": "float",
"methodsName": "FLOAT",
"code": 11,
"name": "float",
"displayName": ""
},
{
"label": "double",
"value": "double",
"methodsName": "DOUBLE",
"code": 12,
"name": "double",
"displayName": ""
},
{
"label": "date",
"value": "date",
"methodsName": "DATE",
"code": 13,
"name": "date",
"displayName": ""
},
{
"label": "time",
"value": "time",
"methodsName": "TIME",
"code": 14,
"name": "time",
"displayName": ""
},
{
"label": "timestamp",
"value": "timestamp",
"methodsName": "TIMESTAMP",
"code": 15,
"name": "timestamp",
"displayName": ""
},
{
"label": "timestamp_ltz",
"value": "timestamp_ltz",
"methodsName": "TIMESTAMP_LTZ",
"code": 16,
"name": "timestamp_ltz",
"displayName": ""
},
{
"label": "interval",
"value": "interval",
"methodsName": "INTERVAL",
"code": 17,
"name": "interval",
"displayName": ""
},
{
"label": "array",
"value": "array",
"methodsName": "ARRAY",
"code": 18,
"name": "array",
"displayName": ""
},
{
"label": "multiset",
"value": "multiset",
"methodsName": "MULTISET",
"code": 19,
"name": "multiset",
"displayName": ""
},
{
"label": "map",
"value": "map",
"methodsName": "MAP",
"code": 20,
"name": "map",
"displayName": ""
},
{
"label": "row",
"value": "row",
"methodsName": "ROW",
"code": 21,
"name": "row",
"displayName": ""
},
{
"label": "raw",
"value": "raw",
"methodsName": "RAW",
"code": 22,
"name": "raw",
"displayName": ""
}
]
const CategoryType = [{
value: 0,
label: "default",
methodsName: 'DEFAULT',
},
{
value: 1,
label: "字段",
key: 1,
methodsName: 'RAW',
},
{
value: 2,
label: "表达式",
key: 2,
methodsName: 'FUNCTION',
},
{
value: 3,
label: "常量",
key: 3,
methodsName: 'CONSTANT',
},
{
value: 4,
label: "参数",
key: 4,
methodsName: 'PARAM',
},
]
export default {
FlinkColumnDataType,
CategoryType,
}
删除
vxe-table 官网
详细配置请看官网
https://vxetable.cn/#/table/start/install