黔西南大屏

components/layout/AiDvTable/AiDvTable.vue

@@ -25,7 +25,13 @@
             flex: config[i].width ? 'inherit' : 1
           }">
           <i v-if="isShowIndex === '1' && i === 0">{{ index + 1 }}</i>
-          <span :title="column.v">{{ column.v }}</span>
+          <render-slot
+            v-if="config[i].render"
+            :render="config[i].render"
+            :row="item"
+            :column="column">
+          </render-slot>
+          <span v-else :title="column" @click="onClick(config[i], item)">{{ column }}</span>
         </div>
       </div>
     </div>
@@ -36,6 +42,26 @@
   export default {
     name: 'AiDvTable',
 
+    components: {
+      renderSlot: {
+        functional: true,
+        props: {
+          render: Function,
+          column: {type: [String, Number] },
+          row: {type: [Array, Object] },
+        },
+        render: (h, data) => {
+          let params = {
+            row: data.props.row
+          }
+          if (data.props.column) {
+            params.column = data.props.column
+          }
+          return data.props.render(h, params)
+        }
+      }
+    },
+
     props: {
       data: {
         type: Array,
@@ -68,7 +94,7 @@
       },
 
       size: {
-        type: 'String',
+        type: String,
         default: 'small'
       }
     },
@@ -114,12 +140,14 @@
         })
 
         this.body = bodyKey.map(v => {
-          return value.map(e => {
-            return {
-              v: e[v]
-            }
-          })
+          return value.map(e => e[v])
         })
+      },
+
+      onClick (config, e) {
+        if (config.click && typeof config.click === 'function') {
+          return config.click.call(this, e)
+        }
       }
     }
   }