feat:动态表格的tag列渲染

web/src/components/table/fieldRender/index.vue

@@ -1,12 +1,12 @@
 <template>
     <!-- Icon -->
-    <Icon v-if="field.render == 'icon'" :name="row.icon" />
+    <Icon v-if="field.render == 'icon'" :name="row[property]" />
 
     <!-- switch -->
     <el-switch
         v-if="field.render == 'switch'"
         @change="changeField($event, field.render!, property)"
-        :model-value="row.status"
+        :model-value="row[property]"
         active-value="1"
         inactive-value="0"
     />
@@ -18,12 +18,16 @@
 
     <!-- images -->
     <div v-if="field.render == 'images'" class="ba-render-image">
-        <img class="image-item" src="~assets/bg.jpg" />
-        <img class="image-item" src="~assets/bg.jpg" />
+        <img class="images-item" src="~assets/bg.jpg" />
+        <img class="images-item" src="~assets/bg.jpg" />
     </div>
 
     <!-- tag -->
-    <div v-if="field.render == 'tag'">tag渲染</div>
+    <div v-if="field.render == 'tag'">
+        <el-tag :type="getTagType(row[property], field.custom)" :effect="field.effect ?? 'light'" :size="field.size ?? 'default'">{{
+            row[property]
+        }}</el-tag>
+    </div>
 
     <!-- url -->
     <div v-if="field.render == 'url'">url渲染</div>
@@ -45,6 +49,7 @@
 </template>
 
 <script setup lang="ts">
+import type { TagProps } from 'element-plus'
 interface Props {
     row: TableRow
     field: TableColumn
@@ -65,14 +70,19 @@ const changeField = (value: any, type: string, field: keyof TableRow) => {
         props.row[field] = value
     }
 }
+
+const getTagType = (value: string, custom: any): TagProps['type'] => {
+    return custom && custom[value] ? custom[value] : ''
+}
 </script>
 
 <style scoped lang="scss">
 .ba-render-image {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    .image-item {
+    text-align: center;
+    .images {
+        display: block;
+    }
+    .images-item {
         margin: 0 5px;
     }
     img {

web/src/components/table/header/index.vue

@@ -1,7 +1,7 @@
 <template>
     <div class="table-header">
         <el-tooltip v-if="props.buttons.includes('refresh')" content="刷新" placement="top">
-            <el-button color="#40485b" class="table-header-operate" type="info">
+            <el-button v-blur color="#40485b" class="table-header-operate" type="info">
                 <Icon name="fa fa-refresh" />
             </el-button>
         </el-tooltip>

web/src/views/backend/auth/menu.vue

@@ -42,10 +42,17 @@ const state: {
     tableColumn: [
         { type: 'selection', align: 'center' },
         { label: '标题', prop: 'title', align: 'left' },
-        { label: '图片测试', prop: 'title', align: 'left', render: 'images' },
+        { label: '图片', prop: 'title', align: 'left', render: 'image', width: '60' },
+        { label: '图片测试', prop: 'title', align: 'left', render: 'images', width: '164' },
         { label: '图标', prop: 'icon', align: 'center', width: '60', render: 'icon' },
         { label: '名称', prop: 'name', align: 'center', 'show-overflow-tooltip': true },
-        { label: '类型', prop: 'type', align: 'center' },
+        {
+            label: '类型',
+            prop: 'type',
+            align: 'center',
+            render: 'tag',
+            custom: { menu: 'danger', menu_dir: 'success', button: 'info' },
+        },
         { label: '组件路径', prop: 'component', align: 'center', 'show-overflow-tooltip': true },
         { label: '状态', prop: 'status', align: 'center', width: '80', render: 'switch' },
         {

web/types/global.d.ts

@@ -11,3 +11,7 @@ interface FormItemProps {
     tip: string
     rule: any
 }
+
+interface anyObj {
+    [key: string]: any
+}

web/types/table.d.ts

@@ -1,33 +1,38 @@
-interface TableColumn {
-    render?: string
-    prop?: string
-    type?: string
-    label?: string
-    width?: string | number
-    fixed?: true | 'left' | 'right'
-    formatter?: Function
-    align?: 'left' | 'center' | 'right'
-    buttons?: OptButton[]
-    'min-width'?: string | number
-    'show-overflow-tooltip'?: boolean
-    'header-align'?: 'left' | 'center' | 'right'
-    'class-name'?: string
-    'label-class-name'?: string
-}
+import type { TagProps, ButtonType } from 'element-plus'
+declare global {
+    interface TableColumn {
+        render?: string
+        prop?: string
+        type?: string
+        label?: string
+        width?: string | number
+        fixed?: true | 'left' | 'right'
+        formatter?: Function
+        align?: 'left' | 'center' | 'right'
+        buttons?: OptButton[]
+        effect?: TagProps['effect']
+        size?: TagProps['size']
+        custom?: any
+        'min-width'?: string | number
+        'show-overflow-tooltip'?: boolean
+        'header-align'?: 'left' | 'center' | 'right'
+        'class-name'?: string
+        'label-class-name'?: string
+    }
 
-interface OptButton {
-    name: string
-    title?: string
-    text?: string
-    class?: string
-    click: Function
-    type: '' | 'default' | 'info' | 'success' | 'warning' | 'text' | 'primary' | 'danger'
-    icon: string
-}
+    interface OptButton {
+        name: string
+        title?: string
+        text?: string
+        class?: string
+        click: Function
+        type: ButtonType
+        icon: string
+    }
 
-interface TableRow {
-    [key: string]: any
-    children?: TableRow[]
-}
+    interface TableRow extends anyObj {
+        children?: TableRow[]
+    }
 
-type HeaderOptButton = 'refresh' | 'add' | 'edit' | 'delete' | 'unfold' | 'recycle bin'
+    type HeaderOptButton = 'refresh' | 'add' | 'edit' | 'delete' | 'unfold' | 'recycle bin'
+}