列组件 JGanttColumn

JeremyJone ... 2023-7-13 大约 2 分钟

# 列组件 JGanttColumn

作者：jeremyjone

日期：2020-10-12

版权：jeremyjone

因为我们在内部已经将其加载，所以您并不需要显示的再次导入到您的组件中就可以使用。

列组件会显示在甘特表的左侧，如果没有提供，则不显示任何列。

# 基础使用

您只需要简单的将其插入到根组件内即可。

基于入门的示例，您可以直接这样使用：

<j-gantt
    data-index="index"
    :data="dataList" />
    <j-gantt-column label="index" />
</j-gantt>

1
2
3
4
5

它将显示成如下内容：

# 属性

# center
Update v0.0.8

type: Boolean, default: false

可以控制当前列的内容居中，默认居左。

# date-format

type: String, default: yyyy-MM-dd

自定义显示日期的格式。如果列内需要显示日期，可以通过该属性来格式化日期。

请注意

值得注意的是，如果给出该字段，那么其数据内容一定会被当成日期来解析并且格式化，所以不要在非日期字段添加该属性。

更多关于日期格式化的属性，参看日期格式化属性

# empty-data

type: String, default: 无数据 😢

设置空数据时显示的内容。如果数据内容为空，则会显示空数据内容。

# label* required

*required*, type: String

label 是一个必填属性，它应当对应您给出数据的某一个键名。

它将加载该字段数据的内容显示在列内容中，同时表头的名称默认也会显示为该 label 名称。当然，您可以通过设置 name 来自定义。

# merge

type: (data) => boolean | Boolean, default: false

设置当前列是否需要与前一列合并。您可以给出一个 Boolean 值或者一个返回 Boolean 值的函数。

函数允许您使用行内数据。

mergeFunc: function(data) {
    // your code
    return true; // 请确保返回一个 Boolean 值。
}

1
2
3
4

这是一个很灵活的属性，如果设置为 true，则会与前一列进行合并，同时不显示当前列的内容。

请注意，该字段对首列无效。

# name

type: String

设置该列表头的显示文本，如果没有，则会显示 label 的内容。它的优先级比 label 高。

# selectable

type: Boolean, default: false

设置当前列内容的文本是否可以选择，默认禁止选择。

# width

type: Number | String, default: 80

设置该列的列宽。默认宽度 80，请保持宽度大于 30，否则会引起渲染异常。

# 插槽

列组件内部允许您插入任何内容，同时它会抛出当前行的数据以供您使用。

一个简单的示例：

<j-gantt-column label="name">
  <template v-slot="data">
    <div>{{ data }}</div>
  </template>
</j-gantt-column>