DataTask 任务清单

使用 avue-data-task 展示任务清单，通过 option 提供配置和数据。

使用示例

效果预览可直接操作下方示例

勾选或取消任务，顶部完成数量和进度随之更新。

正在加载示例…

<template>
  <avue-data-task :option="option" @change="handleChange"></avue-data-task>
  <el-alert v-if="status" :title="status" :closable="false" />
</template>
<script setup>
import { ref } from 'vue';
const status = ref('');
const option = ref({
  title: '今日任务',
  data: [
    { title: '完成项目需求文档', deadline: '今天 18:00', priority: '高', completed: false },
    { title: '代码评审', deadline: '今天 15:00', priority: '中', completed: true },
    { title: '修复登录页面Bug', priority: '高', completed: false },
    { title: '整理会议纪要', deadline: '明天', priority: '低', completed: false },
    { title: '更新用户手册', completed: true }
  ]
});
const handleChange = (data) => {
  status.value = `${data.item.title}：${data.completed ? '已完成' : '未完成'}（下标 ${data.index}）`;
};
</script>

Props

参数	类型	默认值	说明
option	object	{}	组件配置；不使用 option 外的独立 data 属性

option 配置

字段	类型	默认值	说明
data	array	[]	可修改的任务数组
title	string	—	标题，设置后同时展示完成数量

data 数据项

字段	类型	默认值	说明
title	string	—	任务标题
completed	boolean	false（建议显式设置）	是否完成，勾选时组件直接修改这个字段
deadline	string	—	截止时间文本，不自动解析日期
priority	string	—	high/medium/low 或当前语言包别名，对应 danger/warning/info 标签

使用说明

传入可响应的数组，不要传冻结对象。组件直接修改 item.completed，业务侧在 change 中保存；没有 v-model 或 update:option 事件。

事件与回调

事件	触发时机	载荷
change	勾选状态变化，item 已修改	{ item, index, completed }

插槽与方法

当前组件未定义内容插槽。

不需要通过 ref 调用内部渲染方法；更新 option 或 option.data 即可刷新内容。