Commit aee613034fa13c986018ae11d23dcacc679a088f
1 parent
d677729a
refactor(mock): remove third-party images
Showing
2 changed files
with
18 additions
and
25 deletions
mock/demo/table-demo.ts
1 | 1 | import { MockMethod } from 'vite-plugin-mock'; |
2 | +import { Random } from 'mockjs'; | |
2 | 3 | import { resultPageSuccess } from '../_util'; |
3 | 4 | |
5 | +function getRandomPics(count = 10): string[] { | |
6 | + const arr: string[] = []; | |
7 | + for (let i = 0; i < count; i++) { | |
8 | + arr.push(Random.image('800x600', Random.color(), Random.color(), Random.title())); | |
9 | + } | |
10 | + return arr; | |
11 | +} | |
12 | + | |
4 | 13 | const demoList = (() => { |
5 | 14 | const result: any[] = []; |
6 | 15 | for (let index = 0; index < 60; index++) { |
... | ... | @@ -18,6 +27,9 @@ const demoList = (() => { |
18 | 27 | name6: '@cname()', |
19 | 28 | name7: '@cname()', |
20 | 29 | name8: '@cname()', |
30 | + avatar: Random.image('400x400', Random.color(), Random.color(), Random.first()), | |
31 | + imgArr: getRandomPics(Math.ceil(Math.random() * 3) + 1), | |
32 | + imgs: getRandomPics(Math.ceil(Math.random() * 3) + 1), | |
21 | 33 | date: `@date('yyyy-MM-dd')`, |
22 | 34 | time: `@time('HH:mm')`, |
23 | 35 | 'no|100000-10000000': 100000, | ... | ... |
src/views/demo/table/CustomerCell.vue
... | ... | @@ -8,32 +8,12 @@ |
8 | 8 | </Tag> |
9 | 9 | </template> |
10 | 10 | <template #avatar="{ record }"> |
11 | - <Avatar | |
12 | - :size="60" | |
13 | - :src="'http://api.btstu.cn/sjtx/api.php?lx=c1&format=images&id=' + record.id" | |
14 | - /> | |
11 | + <Avatar :size="60" :src="record.avatar" /> | |
15 | 12 | </template> |
16 | - <template #img> | |
17 | - <TableImg | |
18 | - :size="60" | |
19 | - :simpleShow="true" | |
20 | - :imgList="[ | |
21 | - 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png?1622962250222', | |
22 | - 'https://picsum.photos/id/66/346/216', | |
23 | - 'https://picsum.photos/id/67/346/216', | |
24 | - ]" | |
25 | - /> | |
26 | - </template> | |
27 | - <template #imgs> | |
28 | - <TableImg | |
29 | - :size="60" | |
30 | - :imgList="[ | |
31 | - 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png?1622962250222', | |
32 | - 'https://picsum.photos/id/66/346/216', | |
33 | - 'https://picsum.photos/id/67/346/216', | |
34 | - ]" | |
35 | - /> | |
13 | + <template #img="{ text }"> | |
14 | + <TableImg :size="60" :simpleShow="true" :imgList="text" /> | |
36 | 15 | </template> |
16 | + <template #imgs="{ text }"> <TableImg :size="60" :imgList="text" /> </template> | |
37 | 17 | |
38 | 18 | <template #category="{ record }"> |
39 | 19 | <Tag color="green"> |
... | ... | @@ -75,7 +55,7 @@ |
75 | 55 | }, |
76 | 56 | { |
77 | 57 | title: '图片列表1', |
78 | - dataIndex: 'img', | |
58 | + dataIndex: 'imgArr', | |
79 | 59 | helpMessage: ['这是简单模式的图片列表', '只会显示一张在表格中', '但点击可预览多张图片'], |
80 | 60 | width: 140, |
81 | 61 | slots: { customRender: 'img' }, |
... | ... | @@ -109,6 +89,7 @@ |
109 | 89 | setup() { |
110 | 90 | const [registerTable] = useTable({ |
111 | 91 | title: '自定义列内容', |
92 | + titleHelpMessage: '表格中所有头像、图片均为mock生成,仅用于演示图片占位', | |
112 | 93 | api: demoListApi, |
113 | 94 | columns: columns, |
114 | 95 | bordered: true, | ... | ... |