diff --git a/mock/demo/table-demo.ts b/mock/demo/table-demo.ts
index a455e2dc..2fae797f 100644
--- a/mock/demo/table-demo.ts
+++ b/mock/demo/table-demo.ts
@@ -1,6 +1,15 @@
import { MockMethod } from 'vite-plugin-mock';
+import { Random } from 'mockjs';
import { resultPageSuccess } from '../_util';
+function getRandomPics(count = 10): string[] {
+ const arr: string[] = [];
+ for (let i = 0; i < count; i++) {
+ arr.push(Random.image('800x600', Random.color(), Random.color(), Random.title()));
+ }
+ return arr;
+}
+
const demoList = (() => {
const result: any[] = [];
for (let index = 0; index < 60; index++) {
@@ -18,6 +27,9 @@ const demoList = (() => {
name6: '@cname()',
name7: '@cname()',
name8: '@cname()',
+ avatar: Random.image('400x400', Random.color(), Random.color(), Random.first()),
+ imgArr: getRandomPics(Math.ceil(Math.random() * 3) + 1),
+ imgs: getRandomPics(Math.ceil(Math.random() * 3) + 1),
date: `@date('yyyy-MM-dd')`,
time: `@time('HH:mm')`,
'no|100000-10000000': 100000,
diff --git a/src/views/demo/table/CustomerCell.vue b/src/views/demo/table/CustomerCell.vue
index 869ab255..1f74d07a 100644
--- a/src/views/demo/table/CustomerCell.vue
+++ b/src/views/demo/table/CustomerCell.vue
@@ -8,32 +8,12 @@
-
+
-
-
-
-
-
+
+
+
@@ -75,7 +55,7 @@
},
{
title: '图片列表1',
- dataIndex: 'img',
+ dataIndex: 'imgArr',
helpMessage: ['这是简单模式的图片列表', '只会显示一张在表格中', '但点击可预览多张图片'],
width: 140,
slots: { customRender: 'img' },
@@ -109,6 +89,7 @@
setup() {
const [registerTable] = useTable({
title: '自定义列内容',
+ titleHelpMessage: '表格中所有头像、图片均为mock生成,仅用于演示图片占位',
api: demoListApi,
columns: columns,
bordered: true,