WetProList 高级列表

组件简介

拥有常规样式的列表，在完成一个标准的列表时即可使用。同时拥有多种展示模式

代码演示

基本使用

简单数据展示

基本使用，传入的数据格式要满足的类型如下：

type DataSourceTypeItem<T extends Record<string,any>> = {
    name:string,
    desc:string,
    image?:string // 图片地址   
    [key in keyof T]?: any
}

如果有更多的自定义样式和属性渲染请使用：

1. headElement： 头部图片渲染区域，
2. nameElement： 名称渲染区域
3. contentElement： 内容描述渲染区域
4. actionsElement： 操作渲染区域

以上类型均为：

(data:any)=>Component|VNode

其中回调函数的data是表格接受的数据项成员

卡片列表

卡片列表是通过专门的渲染组件WetProListRenderCard提供的，使用如下：

并将type设置为card即可

选择列表

查询列表

自定义列表内容渲染组件

自定义渲染组件其实很简单，就是组件接受一个info的props参数即可

customize-content.vue

<template>
  <div>
    <ElSpace>
      <ElTag type="primary">
        {{ props.info.name }}
      </ElTag>
      <ElTag type="info">
        {{ props.info.desc }}
      </ElTag>
    </ElSpace>
  </div>
</template>
<script setup lang="ts">
import { ElSpace, ElTag } from 'element-plus'
const props = defineProps({
    info: {
        type: Object,
        default: () => ({})
    }
})
</script>

属性

参数	描述	类型	默许值
request	查询请求配置	WetProTableRequest	-
dataSource	固定列表数据	any[]	[]
type	列表类型	'card'|''	-
headElement	头部渲染函数	(data:any)=>Component|VNode>(Function)	-
nameElement	列表名渲染函数	(data:any)=>Component|VNode>(Function)	-
contentElement	列表内容区域渲染函数	(data:any)=>Component|VNode>(Function)	-
actionsElement	操作区渲染函数	(data:any)=>Component|VNode>(Function)	-
grid	col布局配置	Partial<ColProps & {gutter:number}	{span：24}
selection/v-model:selection	可选列表值绑定	any[]	-
search	search区域表单配置	Partial<WetQeuryformPropsType>	-
pagination	分页配置	Partial<PaginationProps>&{ position?:'left'| 'right'| 'center'}|boolean	true

方法

略