增加canvas版t-table组件

package.json

@@ -12,8 +12,10 @@
     "deploy": "gh-pages -d dist"
   },
   "dependencies": {
+    "axios": "^0.21.0",
     "core-js": "^3.6.4",
     "element-ui": "^2.4.5",
+    "loadsh": "^0.0.4",
     "vue": "^2.6.11"
   },
   "devDependencies": {

src/components/Icon/index.js

@@ -0,0 +1,12 @@
+import Vue from 'vue';
+import Icon from './index.vue';
+
+Vue.component('Icon', Icon);
+
+// 导入所有的svg（参照webpack文档: http://webpack.github.io/docs/context.html#dynamic-requires ）
+// ~function (requireContext) {
+//   return requireContext.keys().map(requireContext)
+// }(require.context('./svg', false, /\.svg$/))
+const requireAll = requireContext => requireContext.keys().map(requireContext);
+const req = require.context('./svg', false, /\.svg$/)
+requireAll(req);

src/components/Icon/index.vue

@@ -0,0 +1,47 @@
+<template>
+    <svg :style="iconSty"
+         aria-hidden="true">
+        <use :xlink:href="iconName"/>
+    </svg>
+</template>
+<script>
+    export default {
+        name: 'Icon',
+    
+        props: {
+            type: {
+                default: 'sad'
+            },
+            size: {
+                type: [Number, String],
+                default: 16
+            },
+            color: {
+                type: String
+            }
+        },
+    
+        computed: {
+            iconName() {
+                return '#' + this.type
+            },
+            iconSty() {
+                return {
+                    'font-size': this.size + 'px',
+                    'color': this.color
+                }
+            }
+        }
+    }
+</script>
+
+<style scoped>
+    svg {
+        width: 1em;
+        height: 1em;
+        vertical-align: -0.15em;
+        fill: currentColor;
+        overflow: hidden;
+        user-select: none;
+    }
+</style>

src/components/data-table/column.vue

@@ -2,7 +2,7 @@
 export default {
     name: 'DTableGridColumn',
     props: {
-        type: String,
+        business_type: String,
         showTooltip: Boolean, // 内容超出显示tooltip
         align: [Boolean, String], // 对齐方式
         fixed: [Boolean, String], // 固定列
@@ -15,7 +15,9 @@ export default {
                 return []
             }
         },
-        renderColumn: Function
+        renderColumn: Function,
+        linkAction: Function,
+        cardRender: Function
     },
     provide() {
         return {
@@ -41,14 +43,29 @@ export default {
         getColumnAction() {
             let links = []
             let dropdown = []
-            this.actions.forEach(item => {
-                if (item.type === 'link') {
-                    links.push(item)
+            if (this.business_type === 'link') {
+                links = {
+                    handler: ({ row, rowIndex }) => {
+                        typeof this.linkAction === 'function' && this.linkAction({ row, rowIndex })
+                    },
+                    cardRender: (pos, { row, rowIndex }) => {
+                        if (typeof this.cardRender === 'function') {
+                            const vnode = this.cardRender(this.$createElement, { row, rowIndex })
+                            this.dTable.updatePoptip(pos, vnode)
+                        }
+                    }
                 }
-                if (item.type === 'dropdown') {
-                    dropdown = item.list
-                }
-            })
+            } else if (this.business_type === 'action'){
+                this.actions.forEach(item => {
+                    if (item.type === 'link') {
+                        links.push(item)
+                    }
+                    if (item.type === 'dropdown') {
+                        dropdown = item.list
+                    }
+                })
+            }
+            
             return {
                 links,
                 dropdown
@@ -59,7 +76,7 @@ export default {
         const self = this
         const { links, dropdown } = this.getColumnAction()
         this.column = {
-            type: this.type,
+            business_type: this.business_type,
             property: this.property,
             label: this.label,
             showTooltip: this.showTooltip,