feat: xtable增加预览功能

xingyu
1 parent 71d4c5ad
Showing 3 changed files with 36 additions and 1 deletions
yudao-ui-admin-vue3/src/plugins/vxeTable/renderer/index.tsx
yudao-ui-admin-vue3/src/plugins/vxeTable/renderer/preview.tsx
yudao-ui-admin-vue3/src/views/infra/fileList/fileList.data.ts
@@ -4,3 +4,4 @@ import &#39;./dict&#39;
 import './html'
 import './link'
 import './img'
+import './preview'
+import { VXETable } from 'vxe-table'
+import { ElImage, ElLink } from 'element-plus'
+
+// 图片渲染
+VXETable.renderer.add('XPreview', {
+  // 默认显示模板
+  renderDefault(_renderOpts, params) {
+    const { row, column } = params
+    if (row.type.indexOf('image/') === 0) {
+      return (
+        <ElImage
+          style="width: 80px; height: 50px"
+          src={row[column.field]}
+          key={row[column.field]}
+          preview-src-list={[row[column.field]]}
+          fit="contain"
+          lazy
+        ></ElImage>
+      )
+    } else if (row.type.indexOf('video/') === 0) {
+      return (
+        <video>
+          <source src={row[column.field]}></source>
+        </video>
+      )
+    } else {
+      return (
+        <ElLink href={row[column.field]} target="_blank">
+          {row[column.field]}
+        </ElLink>
+      )
+    }
+  }
+})
@@ -23,7 +23,7 @@ const crudSchemas = reactive&lt;VxeCrudSchema&gt;({
       field: 'url',
       table: {
         cellRender: {
-          name: 'XImg'
+          name: 'XPreview'
         }
       }
     },