Browse Source

table支持自定义表头icon、支持render入参等 (#1261)

* feat(table): 支持自定义表头icon
xch1029 3 years ago
parent
commit
2ad539ee0c

+ 13 - 4
src/packages/__VUE/table/demo.vue

@@ -22,6 +22,12 @@
     <nut-table :columns="columns3" :data="data5"> </nut-table>
     <nut-table :columns="columns3" :data="data5"> </nut-table>
     <h2>支持排序</h2>
     <h2>支持排序</h2>
     <nut-table :columns="columns6" :data="data6" @sorter="handleSorter"> </nut-table>
     <nut-table :columns="columns6" :data="data6" @sorter="handleSorter"> </nut-table>
+    <h2>支持自定义表头icon</h2>
+    <nut-table :columns="columns1" :data="data1">
+      <template #icon-name>
+        <nut-icon name="people"></nut-icon>
+      </template>
+    </nut-table>
   </div>
   </div>
 </template>
 </template>
 
 
@@ -98,7 +104,10 @@ export default createDemo({
         {
         {
           title: '姓名',
           title: '姓名',
           key: 'name',
           key: 'name',
-          align: 'center'
+          align: 'center',
+          render(data) {
+            return `${data.name}(${data.sex})`;
+          }
         },
         },
         {
         {
           title: '性别',
           title: '性别',
@@ -182,7 +191,8 @@ export default createDemo({
           name: 'Tom',
           name: 'Tom',
           sex: '男',
           sex: '男',
           record: '小学',
           record: '小学',
-          render: () => {
+          render: (data) => {
+            console.log(data);
             return h(
             return h(
               Button,
               Button,
               {
               {
@@ -247,8 +257,7 @@ export default createDemo({
       timer: null as number | null,
       timer: null as number | null,
       summary: () => {
       summary: () => {
         return {
         return {
-          value: '这是总结栏',
-          colspan: 5
+          value: '这是总结栏'
         };
         };
       }
       }
     });
     });

+ 12 - 2
src/packages/__VUE/table/index.vue

@@ -12,7 +12,12 @@
           >
           >
             {{ item.title }}
             {{ item.title }}
             <slot name="icon"></slot>
             <slot name="icon"></slot>
-            <nut-icon v-if="!$slots.icon && item.sorter" name="down-arrow" size="12px"></nut-icon>
+            <slot :name="`icon-${item.key}`"></slot>
+            <nut-icon
+              v-if="!$slots.icon && !$slots[`icon-${item.key}`] && item.sorter"
+              name="down-arrow"
+              size="12px"
+            ></nut-icon>
           </span>
           </span>
         </view>
         </view>
       </view>
       </view>
@@ -25,7 +30,12 @@
             :key="value"
             :key="value"
           >
           >
             {{ typeof item[value] !== 'function' ? item[value] : '' }}
             {{ typeof item[value] !== 'function' ? item[value] : '' }}
-            <RenderColumn :slots="item[value]" v-if="typeof item[value] === 'function'"></RenderColumn>
+            <RenderColumn :slots="item[value]" :data="item" v-if="typeof item[value] === 'function'"></RenderColumn>
+            <RenderColumn
+              :slots="getColumnItem(value).render"
+              :data="item"
+              v-else-if="typeof getColumnItem(value).render === 'function'"
+            ></RenderColumn>
           </span>
           </span>
         </view>
         </view>
       </view>
       </view>

+ 3 - 2
src/packages/__VUE/table/renderColumn.ts

@@ -1,9 +1,10 @@
 import { h } from 'vue';
 import { h } from 'vue';
 export default {
 export default {
   setup(props: any) {
   setup(props: any) {
-    return () => h(`view`, {}, props.slots());
+    return () => h(`view`, {}, props.slots(props.data));
   },
   },
   props: {
   props: {
-    slots: Object
+    slots: Object,
+    data: Object
   }
   }
 };
 };