DataList 数据列表

使用 avue-data-list 展示数据列表，通过 option 提供配置和数据。

使用示例

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

点击列表项接收当前记录，也可在 extra 插槽放置头部操作。

正在加载示例…

<template>
  <div>
    <h3>基础列表</h3>
    <avue-data-list :option="option1" @click="item => status = '当前条目：' + item.title">
      <template #extra><el-button text @click="status = '已点击头部操作'">管理</el-button></template>
    </avue-data-list>
    <h3 style="margin-top: 20px;">带操作按钮</h3>
    <avue-data-list :option="option2" @click="item => status = '当前条目：' + item.title" />
    <el-alert :title="status || '点击条目、操作按钮或头部管理查看回调'" :closable="false" />
  </div>
</template>
<script setup>
import { ref } from 'vue';
const status = ref('');
const action = (label) => (item) => { status.value = label + '：' + item.title; };
const option1 = ref({
  title: '最近访问',
  data: [
    { title: '项目管理系统', desc: '上次访问：10分钟前', avatar: '/images/logo.png', extra: '1.2k', label: '访问量' },
    { title: '数据分析平台', desc: '上次访问：1小时前', icon: 'el-icon-data-analysis', iconColor: '#409eff', extra: '856', label: '访问量' },
    { title: '用户中心', desc: '上次访问：昨天', icon: 'el-icon-user', iconColor: '#67c23a', extra: '2.3k', label: '访问量' }
  ]
});
const option2 = ref({
  title: '待办事项',
  data: [
    { title: '审批报销单', desc: '张三提交的差旅报销', tag: '待审批', tagType: 'warning', actions: [{ text: '通过', type: 'primary', click: action('通过') }, { text: '拒绝', type: 'danger', click: action('拒绝') }] },
    { title: '项目验收', desc: 'XX系统二期', tag: '进行中', tagType: 'success', actions: [{ text: '查看详情', click: action('查看详情') }] },
    { title: '合同签署', desc: '需要您的电子签名', tag: '紧急', tagType: 'danger', actions: [{ text: '去签署', type: 'primary', click: action('去签署') }] }
  ]
});
</script>

Props

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

option 配置

字段	类型	默认值	说明
data	array	[]	列表数据
title	string	—	标题；设置后才显示头部 extra 插槽

data 数据项

字段	类型	默认值	说明
title / desc	string	—	标题和说明
avatar / icon / iconColor	string	—	头像、图标与图标颜色，优先展示头像
tag / tagType	string	—	标签及 ElTag 类型
extra / label / valueColor	string / number / string	—	右侧值、其下方标签及值颜色；extra 为 0 时不显示
actions	array	[]	操作按钮 { text, type, click }，默认 type=text；click(item) 接收当前行
click	function	—	条目回调 click(item)

使用说明

操作按钮会阻止点击冒泡，不触发条目的 click。需要显示数值 0 时可传字符串 "0"。

事件与回调

事件	触发时机	载荷
click	点击条目，随后再调用 item.click	item

插槽与方法

插槽	说明	参数
extra	头部右侧内容，仅设置 option.title 时显示	无作用域参数

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