TMom

外观

表格列配置项 ​

tsx
const columns: TableColumn[] = [
  {
    title: 'id', // 列标题
    dataIndex: 'id', // 列标识(唯一)
    width: 60, // 列宽度
    sorter: true, // 是否可排序
    hideInTable: true, // 是否在表格中隐藏
    hideInSearch: true, // 是否在搜索中隐藏
    formItemProps: { // 表单的属性, 详细信息见 FormSchema 配置
      component: 'Select',
      componentProps: {
        options: [{ label: '选项1', value: 1 }, { label: '选项2', value: 2 }],
      },
    },
    customRender: ({ text }) => <Tag color={getTagColor(text)}>{text}</Tag>, // 自定义渲染列
    ellipsis: true, // 是否超出宽度自动省略
    resizable: true, // 是否可调整列宽

  },
  {
    title: '名称',
    width: 150,
    dataIndex: 'name',
  },
  {
    title: '取子表列',
    dataIndex: ['qcCheckType', 'name'],
    hideInSearch: true,
    width: 150,
    customRender: ({ text }) => <Tag color={getTagColor(text)}>{text}</Tag>,
  },
  {
    title: '工具',
    dataIndex: 'tool',
    hideInSearch: true,
    width: 150,
    ellipsis: true,
    resizable: true,
  },
  {
    title: '标准值',
    dataIndex: 'standardVal',
    hideInSearch: true,
    width: 150,
    ellipsis: true,
    resizable: true,
  },
  ......
]
const columns: TableColumn[] = [
  {
    title: 'id', // 列标题
    dataIndex: 'id', // 列标识(唯一)
    width: 60, // 列宽度
    sorter: true, // 是否可排序
    hideInTable: true, // 是否在表格中隐藏
    hideInSearch: true, // 是否在搜索中隐藏
    formItemProps: { // 表单的属性, 详细信息见 FormSchema 配置
      component: 'Select',
      componentProps: {
        options: [{ label: '选项1', value: 1 }, { label: '选项2', value: 2 }],
      },
    },
    customRender: ({ text }) => <Tag color={getTagColor(text)}>{text}</Tag>, // 自定义渲染列
    ellipsis: true, // 是否超出宽度自动省略
    resizable: true, // 是否可调整列宽

  },
  {
    title: '名称',
    width: 150,
    dataIndex: 'name',
  },
  {
    title: '取子表列',
    dataIndex: ['qcCheckType', 'name'],
    hideInSearch: true,
    width: 150,
    customRender: ({ text }) => <Tag color={getTagColor(text)}>{text}</Tag>,
  },
  {
    title: '工具',
    dataIndex: 'tool',
    hideInSearch: true,
    width: 150,
    ellipsis: true,
    resizable: true,
  },
  {
    title: '标准值',
    dataIndex: 'standardVal',
    hideInSearch: true,
    width: 150,
    ellipsis: true,
    resizable: true,
  },
  ......
]

常用属性 ​

参数说明类型默认值
title列标题string-
dataIndex列数据在数据项中对应的路径，支持 ['table','code'] 路径嵌套string | string[]-
width列宽度number-
fixed列是否固定，可选 true(等效于 left) false left rightboolean-
sorter列是否可排序boolean-
align列对齐方式string-
hideInTable列是否在表格中显示boolean-
hideInSearch列是否在表单中显示boolean-
ellipsis列内容超出是否显示省略号boolean-
resizeable列是否可拖拽调整宽度boolean-
customRender列渲染函数(text: string | number, record: any, index: number) => VueNode-
formItemProps表单列配置项object(详见formSchema配置项)-
...省略其他属性--