组件/数据展示引入于 1.3.0

ETaskBoard 任务看板

import EUI 1.0

示例与代码

拖动任务与排序

QML 代码QML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 ETaskBoard { height: 310 width: Math.min(860, parent.width) tasks: [{ "key": 1, "title": qsTr("设计组件"), "status": "todo" }, { "key": 2, "title": qsTr("实现交互"), "status": "doing" }, { "key": 3, "title": qsTr("编写测试"), "status": "todo" }, { "key": 4, "title": qsTr("编写接口文档"), "status": "done" }] }

效果

运行代码，体验组件交互

可修改文字、属性和事件，再点击运行。

代码在当前浏览器中运行 许可

过滤任务

QML 代码QML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 ETaskBoard { height: 310 filterable: true width: Math.min(860, parent.width) tasks: [{ "key": 1, "title": qsTr("设计组件"), "status": "todo" }, { "key": 2, "title": qsTr("实现交互"), "status": "doing" }, { "key": 3, "title": qsTr("编写测试"), "status": "todo" }, { "key": 4, "title": qsTr("编写接口文档"), "status": "done" }] }

效果

运行代码，体验组件交互

可修改文字、属性和事件，再点击运行。

代码在当前浏览器中运行 许可

工作中数量限制

QML 代码QML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 ETaskBoard { height: 310 width: Math.min(860, parent.width) columns: [{ "key": "todo", "title": qsTr("待办") }, { "key": "doing", "title": qsTr("进行中"), "limit": 1 }, { "key": "done", "title": qsTr("已完成") }] tasks: [{ "key": 1, "title": qsTr("设计组件"), "status": "todo" }, { "key": 2, "title": qsTr("实现交互"), "status": "doing" }, { "key": 3, "title": qsTr("编写测试"), "status": "todo" }, { "key": 4, "title": qsTr("编写接口文档"), "status": "done" }] }

效果

运行代码，体验组件交互

可修改文字、属性和事件，再点击运行。

代码在当前浏览器中运行 许可

自定义卡片

QML 代码QML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 ETaskBoard { height: 310 width: Math.min(860, parent.width) cardDelegate: EText { wrapMode: Text.Wrap text: "#" + parent.taskData.key + " " + parent.taskData.title } tasks: [{ "key": 1, "title": qsTr("设计组件"), "status": "todo" }, { "key": 2, "title": qsTr("实现交互"), "status": "doing" }, { "key": 3, "title": qsTr("编写测试"), "status": "todo" }, { "key": 4, "title": qsTr("编写接口文档"), "status": "done" }] }

效果

运行代码，体验组件交互

可修改文字、属性和事件，再点击运行。

代码在当前浏览器中运行 许可

只读看板

QML 代码QML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 ETaskBoard { height: 310 readOnly: true width: Math.min(860, parent.width) tasks: [{ "key": 1, "title": qsTr("设计组件"), "status": "todo" }, { "key": 2, "title": qsTr("实现交互"), "status": "doing" }, { "key": 3, "title": qsTr("编写测试"), "status": "todo" }, { "key": 4, "title": qsTr("编写接口文档"), "status": "done" }] }

效果

运行代码，体验组件交互

可修改文字、属性和事件，再点击运行。

代码在当前浏览器中运行 许可

属性

属性说明取值与默认值

tasksvar

任务数组，默认每项包含唯一 key、title 和 status。

默认值[]

beforeMovevar

移动前同步校验函数；返回 false 或抛出异常时取消移动。

默认值null

draggablebool

允许通过拖拽移动条目。

默认值true

readOnlybool

保持内容可见并禁止用户修改。

默认值false

columnWidthreal

每个任务列的宽度。

默认值260

filterablebool

是否允许输入关键词过滤。

默认值false

keyFieldstring

任务唯一标识字段名；同一看板内不可重复。

默认值"key"

titleFieldstring

任务标题字段名称。

默认值"title"

cardDelegateComponent

自定义任务卡片，通过父级 taskData 读取数据。

默认值null

statusFieldstring

任务的状态字段名称，对应 columns 中的 key。

默认值"status"

filterTextalias

用于过滤显示条目的文本。

默认值search.text

columnsvar

任务列数组，每项包含唯一 key、title 及可选 limit、disabled。

正整数

默认值

展开默认值

[{key: "todo", title: ELocale.texts.TaskTodo}, {key: "doing", title: ELocale.texts.TaskDoing}, {key: "done", title: ELocale.texts.TaskDone}]

errorStringstring只读

模型校验错误代码；有效时为空字符串。

默认值validate()

信号

签名作用

changed(var tasks)

任务数据变化时触发，tasks 为更新后的任务集合。

taskClicked(var task)

点击任务卡片时触发，task 为任务数据。

taskMoved(var task, var from, var to, int index)

任务移动后触发，task 为任务，from 和 to 为原列与目标列，index 为目标列中的位置。

方法

签名作用

validate()

校验当前数据；支持 callback 的组件会将校验结果交给回调。

moveTask(key, status, position)

将 key 对应的任务移动到 status 指定列，position 为列内位置。