diff --git a/src/components/Table/src/hooks/useRender.ts b/src/components/Table/src/hooks/useRender.ts index 5ac41366..68642d1b 100644 --- a/src/components/Table/src/hooks/useRender.ts +++ b/src/components/Table/src/hooks/useRender.ts @@ -1,11 +1,15 @@ import { DictTag } from '@/components/DictTag' import Icon from '@/components/Icon' -import { Image, Tag } from 'ant-design-vue' +import { Button, Image, Tag } from 'ant-design-vue' import dayjs from 'dayjs' import { h } from 'vue' export const useRender = { - // 渲染图片 + /** + * 渲染图片 + * @param text 图片地址 + * @returns image标签 + */ renderImg: (text) => { if (text) { return h(Image, { @@ -16,6 +20,31 @@ export const useRender = { } return '' }, + /** + * 渲染链接 + * @param url 链接地址 + * @param text 文字说明 + * @returns link 按钮 + */ + renderLink: (url, text?) => { + if (url) { + return h( + Button, + { + type: 'link', + href: text + }, + () => text || '' + ) + } + return '' + }, + /** + * 渲染文本,将text与val 拼接到一起 + * @param text 文本1 + * @param val 文本2 + * @returns 文本1 + 文本2 + */ renderText: (text, val) => { if (text) { return text + ' ' + val @@ -23,6 +52,12 @@ export const useRender = { return '' } }, + /** + * 渲染标签 + * @param text 标签文本 + * @param color 标签颜色 + * @returns 标签 + */ renderTag: (text, color?) => { if (!color) { return h(Tag, { color }, () => text) @@ -30,6 +65,11 @@ export const useRender = { return h('span', text) } }, + /** + * 渲染多标签 + * @param texts 文本 + * @returns 多标签 + */ renderTags: (texts: string[]) => { if (texts) { return h('div', null, [ @@ -40,6 +80,12 @@ export const useRender = { } return '' }, + /** + * 渲染日期 + * @param text 日期 + * @param format 格式化 + * @returns 格式化后日期 + */ renderDate: (text, format?) => { if (!text) { return '' @@ -50,6 +96,13 @@ export const useRender = { return dayjs(text).format(format) } }, + /** + * 渲染字典 + * @param text 字典值 + * @param type 字典类型 + * @param dictType number | string | boolean + * @returns 字典标签 + */ renderDict: (text, type, dictType?) => { if (type) { return h(DictTag, { @@ -60,6 +113,11 @@ export const useRender = { } return '' }, + /** + * 渲染图标icon + * @param text icon + * @returns icon + */ renderIcon: (text) => { if (text) { return h(Icon, { icon: text })