Desc 描述列表

说明

感觉 el-descriptions 组件用起来不够方便且不够灵活，所以模仿编写了 y-desc 组件，实现了它的大部分功能，也摒弃了一些不太常用的功能，主要特点：

• 一定程度上简化了组件的使用，使用Lodash的get方法获取值，外部提供数据及配置即可
• 使用 grid 优化了布局，支持响应式（根据组件宽度动态调整列数）
• 默认支持内容展示超宽省略及tooltip功能

注意：

在默认只展示内容时，组件内部使用配置项的 path 属性或 index 作为key值

但是如果使用插槽展示表单等场景下，需要提供 prop 属性，并且在配置中要唯一

用法示例

基础用法

默认3列，各列是等宽的，支持 border 属性

姓名

张三

年龄

25

邮箱

zhangsan@example.com

电话

13800138000

部门

技术部

职位

前端工程师

薪资

15000

地址1

北京市朝阳区某某街道某某小区北京市朝阳区某某街道某某小区北京市朝阳区某某街道某某小区

地址2

北京市海淀区某某街道某某小区

姓名

张三

年龄

25

邮箱

zhangsan@example.com

电话

13800138000

部门

技术部

职位

前端工程师

薪资

15000

地址1

北京市朝阳区某某街道某某小区北京市朝阳区某某街道某某小区北京市朝阳区某某街道某某小区

地址2

北京市海淀区某某街道某某小区

<template>
  <y-desc :data="data" :config="config" />

  <el-divider />

  <y-desc :data="data" :config="config" border />
</template>

<script setup>
import { ref } from 'vue'

const data = ref({
  name: '张三',
  age: 25,
  email: 'zhangsan@example.com',
  phone: '13800138000',
  department: '技术部',
  position: '前端工程师',
  salary: '15000',
  addresses: [
    {
      address: '北京市朝阳区某某街道某某小区北京市朝阳区某某街道某某小区北京市朝阳区某某街道某某小区',
      phone: '13800138000',
      email: 'zhangsan@example.com'
    },
    {
      address: '北京市海淀区某某街道某某小区',
      phone: '13800138001',
    }
  ],
})

const config = ref([
  { label: '姓名', path: 'name' },
  { label: '年龄', path: 'age' },
  { label: '邮箱', path: 'email' },
  { label: '电话', path: 'phone' },
  { label: '部门', path: 'department' },
  { label: '职位', path: 'position' },
  { label: '薪资', path: 'salary' },
  { label: '地址1', path: 'addresses[0].address' },
  { label: '地址2', path: 'addresses[1].address' }
])
</script>

隐藏源码

响应式列数

column 属性支持使用函数来根据组件宽度动态调整，可以手动调整页面宽度来查看效果

姓名

张三

年龄

25

邮箱

zhangsan@example.com

电话

13800138000

部门

技术部

职位

前端工程师

薪资

15000

地址1

北京市朝阳区某某街道某某小区北京市朝阳区某某街道某某小区北京市朝阳区某某街道某某小区

地址2

北京市海淀区某某街道某某小区

宽度：0px

姓名

张三

年龄

25

邮箱

zhangsan@example.com

电话

13800138000

部门

技术部

职位

前端工程师

薪资

15000

地址1

北京市朝阳区某某街道某某小区北京市朝阳区某某街道某某小区北京市朝阳区某某街道某某小区

地址2

北京市海淀区某某街道某某小区

<template>
  <div :style="{ width: width + '%' }">
    <y-desc :data="data" :config="config" :column="column" />

    <el-divider>宽度：{{ innerWidth + 'px' }}</el-divider>

    <y-desc :data="data" :config="config" :column="column" border />
  </div>
  <el-slider v-model="width" :min="10" :max="100" />
</template>

<script setup>
import { ref } from 'vue'

const width = ref(50)
const innerWidth = ref(0)
const column = (width) => {
  innerWidth.value = width
  if (width < 500) {
    return 1
  } else if (width < 800) {
    return 2
  } else if (width < 1200) {
    return 3
  } else {
    return 4
  }
}

const data = ref({
  name: '张三',
  age: 25,
  email: 'zhangsan@example.com',
  phone: '13800138000',
  department: '技术部',
  position: '前端工程师',
  salary: '15000',
  addresses: [
    {
      address: '北京市朝阳区某某街道某某小区北京市朝阳区某某街道某某小区北京市朝阳区某某街道某某小区',
      phone: '13800138000',
      email: 'zhangsan@example.com'
    },
    {
      address: '北京市海淀区某某街道某某小区',
      phone: '13800138001',
    }
  ],
})

const config = ref([
  { label: '姓名', path: 'name' },
  { label: '年龄', path: 'age' },
  { label: '邮箱', path: 'email' },
  { label: '电话', path: 'phone' },
  { label: '部门', path: 'department',span:'column' },
  { label: '职位', path: 'position' },
  { label: '薪资', path: 'salary' },
  { label: '地址1', path: 'addresses[0].address' },
  { label: '地址2', path: 'addresses[1].address' }
])
</script>

隐藏源码

默认插槽用法

当不指定具体的 prop 插槽时，可以使用默认的 label 和 content 插槽来统一自定义所有项的显示；

姓名

默认内容

年龄

默认内容

邮箱

默认内容

电话

默认内容

部门

默认内容

职位

默认内容

<template>
  <y-desc :data="data" :config="config" :column="2">
    <template #label="{ item }">
      <el-icon><Warning /></el-icon>
      {{ item.label }}
    </template>
    <template #content="{ item, index }">
      <el-tag type="success" v-if="index % 2 === 0">{{ item.content || '默认内容' }}</el-tag>
      <span v-else>{{ item.content || '默认内容' }}</span>
    </template>
  </y-desc>
</template>

<script setup>
import { ref } from 'vue'
import { Warning } from '@element-plus/icons-vue'

const data = ref({
  name: '张三',
  age: 25,
  email: 'zhangsan@example.com',
  phone: '13800138000',
  department: '技术部',
  position: '前端工程师'
})

const config = ref([
  { label: '姓名', path: 'name' },
  { label: '年龄', path: 'age' },
  { label: '邮箱', path: 'email' },
  { label: '电话', path: 'phone' },
  { label: '部门', path: 'department' },
  { label: '职位', path: 'position' }
])
</script>

隐藏源码

具名插槽用法

对于需要使用插槽的配置项，需要提供 prop 属性，<prop>-label 是每列中 label 的插槽名，<prop>-content 是每列中 content 的插槽名；

姓名

张三

年龄

25

邮箱

zhangsan@example.com

电话

13800138000

这是department的label插槽

技术部

职位

前端工程师

薪资

15000

地址1

北京市朝阳区某某街道某某小区北京市朝阳区某某街道某某小区北京市朝阳区某某街道某某小区

地址2

北京市海淀区某某街道某某小区

姓名

张三

年龄

25

邮箱

zhangsan@example.com

电话

13800138000

部门

职位

前端工程师

薪资

15000

地址1

北京市朝阳区某某街道某某小区北京市朝阳区某某街道某某小区北京市朝阳区某某街道某某小区

地址2

北京市海淀区某某街道某某小区

<template>
  <y-desc :data="data" :config="config" :column="2">
    <template #department-label>
      这是department的label插槽
    </template>
  </y-desc>

  <el-divider />

  <y-desc :data="data" :config="config" border :column="2">
    <template #department-content>
      <el-input v-model="data.department" />
    </template>
  </y-desc>
</template>

<script setup>
import { ref } from 'vue'

const data = ref({
  name: '张三',
  age: 25,
  email: 'zhangsan@example.com',
  phone: '13800138000',
  department: '技术部',
  position: '前端工程师',
  salary: '15000',
  addresses: [
    {
      address: '北京市朝阳区某某街道某某小区北京市朝阳区某某街道某某小区北京市朝阳区某某街道某某小区',
      phone: '13800138000',
      email: 'zhangsan@example.com'
    },
    {
      address: '北京市海淀区某某街道某某小区',
      phone: '13800138001',
    }
  ],
})

const config = ref([
  { label: '姓名', path: 'name' },
  { label: '年龄', path: 'age' },
  { label: '邮箱', path: 'email', prop: 'email' },
  { label: '电话', path: 'phone' },
  { label: '部门', path: 'department', prop: 'department' },
  { label: '职位', path: 'position' },
  { label: '薪资', path: 'salary' },
  { label: '地址1', path: 'addresses[0].address' },
  { label: '地址2', path: 'addresses[1].address' }
])
</script>

隐藏源码

API

Attributes

属性名	说明	类型	默认值
config	配置项数组	object	—
data	数据对象	object	—
direction	布局方向，同 el-descriptions	enum	'horizontal'
column	列数	number / function	3
labelWidth	label 宽度	string / number	'auto'
label-style	label 样式	object	—
content-style	content 样式	object	—
label-align	label 文本对齐方式	enum	'left'
content-align	content 文本对齐方式	enum	'left'
empty-text	content 内容为空时显示的内容	string	''

DescItem Properties

属性名	说明	类型	默认值
label	标签文本	string	''
content	显示的内容，一般用于显示固定内容，优先级最高	any	—
path	取值路径，即 lodase 的 get 方法的 path 参数；如果未指定，则使用 label 作为取值路径	string	—
prop	选项key	string	—
noTooltip	是否禁用tooltip功能	boolean	false
labelStyle	label 样式	object	—
contentStyle	content 样式	object	—
labelWidth	label 宽度	string / number	'auto'
labelAlign	label 文本对齐方式	enum	'left'
contentAlign	content 文本对齐方式	enum	'left'
span	列的数量；'column'表示占据整行，最好只在响应式列数时使用	number / 'column'	1
format	内容格式化函数	function	—
textTooltip	y-text-tooltip组件的tooltip配置	object	—

Slots

名称	说明	参数
[prop]-label	具名插槽，每一项的自定义标签内容（优先级最高）	object
[prop]-content	具名插槽，每一项的自定义内容（优先级最高）	object
label	默认标签插槽，当未指定 [prop]-label 时使用	object
content	默认内容插槽，当未指定 [prop]-content 时使用	object