cells `v1.1.0`

一个基于 Vant Cell 组件的增强型单元格组组件，支持通过配置动态渲染多个单元格，具备字典数据解析、日期格式化、数据脱敏、灵活布局及样式自定义等功能，适用于详情页、表单展示等场景。

默认情况下使用dict-cells使用, 如果字典包配置中有配置componentsPreFix字段，请根据此字段的具体配置值进行前缀修改，如配置了componentsPreFix为Bu, 则使用bu-cells使用。

复制成功

00:00

基本用法

1. 基础单元格展示

通过 cellList 配置简单的键值对单元格

vue

<template>
  <DictCells 
    :cellList="[
      { title: '姓名', modelValue: '张三' },
      { title: '年龄', modelValue: '25' },
      { title: '性别', modelValue: '男' }
    ]"
  />
</template>

2. 字典数据渲染

通过 dictType 配置，自动将编码转换为字典标签

vue

<template>
  <DictCells 
    :cellList="[
      { 
        title: '婚姻状态', 
        modelValue: '1',  // 字典编码
        dictType: 'marital_status'  // 字典类型
      },
      { 
        title: '学历', 
        modelValue: '3', 
        dictType: 'education' 
      }
    ]"
  />
</template>

3. 自定义布局

通过 col 配置每行显示的单元格数量，gap 配置间距

vue

<template>
  <DictCells 
    :cellList="[
      { title: '字段1', modelValue: '值1' },
      { title: '字段2', modelValue: '值2' },
      { title: '字段3', modelValue: '值3' },
      { title: '字段4', modelValue: '值4' }
    ]"
    col="2"  // 每行2个单元格
    gap="16"  // 间距16px
  />
</template>

Props 说明

参数名	类型	默认值	说明
`cellList`	Array	[]	单元格配置列表，每项为一个单元格的详细配置（见下方「单元格配置项」）
`itemGap`	Number/String/Array	[0, 12]	单元格内部标题与值的间距 - 数组：[纵向间距, 横向间距] - 字符串/数字：行列间距相同
`col`	String/Number	1	每行显示的单元格数量，用于计算单元格宽度
`gap`	Number/String/Array	"12"	单元格之间的间距 - 数组：[行间距, 列间距] - 字符串/数字：行列间距相同
`titleAlign`	String	""	标题对齐方式，可选值：`top`/`left`/`right`/`center`，`top`时标题在上、值在下
`valueAlign`	String	""	值的对齐方式，可选值：`left`/`right`/`center`，默认跟随标题对齐方式
`cellStyle`	Object	{}	单元格整体样式（会被单元格自身配置的style覆盖）
`titleStyle`	Object	{}	标题样式（会被单元格自身配置的titleStyle覆盖）
`defaultVal`	String	""	当值为空时显示的默认文本（如"-"）

单元格配置项（cellList 每项属性）

属性名	类型	说明
`title`	String	单元格标题（必填）
`modelValue`	Any	单元格值的数据源（如编码、原始值等）
`dictType`	String	字典类型，用于将 modelValue（编码）转换为字典标签（如"status"）
`showTreePath`	Boolean	配合 dictType 使用，是否显示树形字典的完整路径（默认false）
`dictTreeOptions`	Object	树形字典配置（如路径分隔符等，配合 showTreePath 使用）
`maskType`	String/Array/Object	数据脱敏配置（见下方「脱敏配置说明」）
`maskStart`	Number	脱敏开始保留长度（配合 maskType 使用）
`maskMiddle`	Number	脱敏中间替换长度（配合 maskType 使用）
`maskEnd`	Number	脱敏结束保留长度（配合 maskType 使用）
`maskSymbol`	String	脱敏替换符号（默认"*"，配合 maskType 使用）
`dateFormat`	String	日期格式化字符串（如"YYYY-MM-DD"），用于将时间戳/日期字符串格式化
`defaultVal`	String	当前单元格的默认值（优先级高于组件的 defaultVal）
`titleWidth`	String	标题宽度（如"100px"、"50%"）
`titleAlign`	String	当前单元格标题对齐方式（覆盖组件的 titleAlign）
`valueAlign`	String	当前单元格值对齐方式（覆盖组件的 valueAlign）
`cellWidth`	String	单元格宽度（覆盖由 col 计算的宽度）
`titleStyle`	Object	当前单元格标题样式（覆盖组件的 titleStyle）
`style`	Object	当前单元格样式（覆盖组件的 cellStyle）
`titleClass`	String/Array/Object	标题额外类名
`valueClass`	String/Array/Object	值的额外类名
`slotList`	Array	单元格插槽配置（见下方「插槽说明」）
...	-	其他 VanCell 支持的属性（如 isLink、arrowDirection 等）

脱敏配置说明（maskType）

maskType 支持三种配置方式，用于对 modelValue 进行脱敏处理：

字符串类型：直接指定脱敏类型（如"phone"手机号脱敏、"idCard"身份证脱敏）
javascript
```
{ title: "手机号", modelValue: "13800138000", maskType: "phone" }
```
数组类型：[start, middle, end, symbol]，分别表示开始保留长度、中间替换长度、结束保留长度、替换符号
javascript
```
{ title: "邮箱", modelValue: "test@example.com", maskType: [2, 3, 5, "*"] }
```

对象类型：详细配置脱敏规则

javascript

{ 
  title: "身份证", 
  modelValue: "110101199001011234", 
  maskType: { start: 6, end: 4, symbol: "x" } 
}

透传属性

组件支持通过 cell- 前缀透传属性给内部的 VanCell 组件，例如：

vue

<DictCells 
  :cellList="cellList" 
  cell-is-link  // 透传给 VanCell 的 is-link 属性
  cell-arrow-direction="down"  // 透传给 VanCell 的 arrow-direction 属性
/>

方法说明

组件通过 defineExpose 暴露以下方法：

方法名	说明	返回值
`getVanCellRefs`	获取所有 VanCell 实例	包含 VanCell 实例的数组

插槽说明

通过单元格配置中的 slotList 可自定义单元格内容，slotList 每项配置：

属性名	类型	说明
`slotName`	String	插槽名称（如 default、title、label）
`render`	Function,String	渲染函数，入参为插槽作用域

示例：

javascript

const cellList1 = [
  {
    title: "状态",
    modelValue: "1",
    dictType: "status",
    slotList: [
      {
        slotName: "value", // 自定义值的显示
        // render 函数：返回 VNode 结构
        render: (h) => {
          return h("div", { class: 'chat-o' }, "爆米花小布");
        }
      }
    ]
  }
];

const cellList2 = [
  {
    title: "状态",
    modelValue: "1",
    dictType: "status",
    slotList: [
      {
        slotName: "value", // 自定义值的显示
        render: "<span class=\"custom-value\">{{value}}</span>"
      }
    ]
  }
];

示例场景

1. 日期格式化

vue

<DictCells 
  :cellList="[
    { 
      title: '创建时间', 
      modelValue: 1620000000000,  // 时间戳
      dateFormat: 'yyyy-MM-dd hh:mm:ss' 
    },
    { 
      title: '生日', 
      modelValue: '19900101',  // 日期字符串
      dateFormat: 'yyyy年MM月dd日' 
    }
  ]"
/>

2. 数据脱敏

vue

<DictCells 
  :cellList="[
    { 
      title: '手机号', 
      modelValue: '13800138000', 
      maskType: 'phone'  // 内置手机号脱敏（保留前3后4）
    },
    { 
      title: '身份证', 
      modelValue: '110101199001011234', 
      maskStart: 6, 
      maskEnd: 4  // 保留前6后4，中间用*替换
    }
  ]"
/>

3. 树形字典展示

vue

<DictCells 
  :cellList="[
    { 
      title: '所属部门', 
      modelValue: '3',  // 部门ID
      dictType: 'dept_tree',  // 树形字典类型
      showTreePath: true,  // 显示完整路径（如"公司>技术部>前端组"）
      dictTreeOptions: { }  // 详细看树形字典数据  getTreeLabelByCodes 也可看cell组件的参数
    }
  ]"
/>

4. 标题在上的布局

vue

<DictCells 
  titleAlign="top"  // 所有单元格标题居上
  :itemGap="[8, 0]"  // 标题与值的纵向间距8px
  :cellList="[
    { title: '详细地址', modelValue: '北京市朝阳区某某街道某某小区1号楼2单元301' },
    { title: '备注', modelValue: '这是一条较长的备注信息，可能需要换行显示' }
  ]"
/>

5. 多列布局

vue

<DictCells 
  col="3"  // 每行3个单元格
  gap="[10, 8]"  // 行间距10px，列间距8px
  :cellList="[
    { title: '参数1', modelValue: '值1' },
    { title: '参数2', modelValue: '值2' },
    { title: '参数3', modelValue: '值3' },
    { title: '参数4', modelValue: '值4' },
    { title: '参数5', modelValue: '值5' },
    { title: '参数6', modelValue: '值6' }
  ]"
/>

类名样式 line-clamp-N N可以是 1-8 可加载 title或value上表示几行溢出隐藏

优质广告位诚邀合作

cells v1.1.0 ​

基本用法 ​

1. 基础单元格展示 ​

2. 字典数据渲染 ​

3. 自定义布局 ​

Props 说明 ​

单元格配置项（cellList 每项属性） ​

脱敏配置说明（maskType） ​

透传属性 ​

方法说明 ​

插槽说明 ​

示例场景 ​

1. 日期格式化 ​

2. 数据脱敏 ​

3. 树形字典展示 ​

4. 标题在上的布局 ​

5. 多列布局 ​