feat:Table 增加标题,列表样式参数 (#1460)

* feat:Table 增加标题,列表样式参数

src/packages/__VUE/table/common.ts

@@ -52,10 +52,20 @@ export const component = (componentName: string, translate: Function) => {
         };
       };
 
+      const stylehead = (item: TableColumnProps) => {
+        return item.stylehead ? item.stylehead : '';
+      };
+      const stylecolumn = (item: TableColumnProps) => {
+        return item.stylecolumn ? item.stylecolumn : '';
+      };
+
       const getColumnItem = (value: string): TableColumnProps => {
         return props.columns.filter((item: TableColumnProps) => item.key === value)[0];
       };
-
+      const getColumnItemStyle = (value: string) => {
+        const style = props.columns.filter((item: TableColumnProps) => item.key === value);
+        return style[0].stylecolumn ? style[0].stylecolumn : '';
+      };
       const handleSorterClick = (item: TableColumnProps) => {
         if (item.sorter) {
           emit('sorter', item);
@@ -86,9 +96,12 @@ export const component = (componentName: string, translate: Function) => {
         classes,
         cellClasses,
         getColumnItem,
+        getColumnItemStyle,
         handleSorterClick,
         sortDataItem,
-        translate
+        translate,
+        stylehead,
+        stylecolumn
       };
     }
   };

src/packages/__VUE/table/demo.vue

@@ -105,11 +105,14 @@ export default createDemo({
       columns1: [
         {
           title: translate('name'),
-          key: 'name'
+          key: 'name',
+          stylehead: 'font-size:20px;color:red;font-weight:bolder;',
+          stylecolumn: 'font-size:10px;'
         },
         {
           title: translate('sex'),
           key: 'sex',
+          stylecolumn: 'font-size:20px;',
           render: ({ sex }) => {
             return h(
               'span',

src/packages/__VUE/table/doc.en-US.md

@@ -34,7 +34,9 @@ app.use(Table);
         columns: [
           {
             title: 'name',
-            key: 'name'
+            key: 'name',
+            stylehead: 'font-size:20px;color:red;font-weight:bolder;',
+            stylecolumn: 'font-size:10px;color:blue;'
           },
           {
             title: 'sex',
@@ -623,6 +625,8 @@ app.use(Table);
 | ------ | ------------------------------------------------------------------ | ------------------------- | ------ |
 | key    | Unique identification of the column                                          | String                    | ``     |
 | title  | Header title                                                                                                                                                 | String                    | ``     |
+| stylehead  | Header style                                                                                                                                                 | String                    | ``     |
+| stylecolumn  | Column style                                                                                                                                                 | String                    | ``     |
 | align  | Alignment of columns, optional values`left`,`center`,`right`                                                                                                              | String                    | `left` |
 | sorter | sort，optional values `true`,`function`, `default`, Where `default` means that you may depend on the interface after clicking, `function` you can return a specific sorting function, `default` indicates that the default sorting algorithm is adopted | Boolean、Function、String | -      |
 | render | Custom render column data, high priority                                                                                                                               | Function(record)          | -      |

src/packages/__VUE/table/doc.md

@@ -34,7 +34,9 @@ app.use(Table);
         columns: [
           {
             title: '姓名',
-            key: 'name'
+            key: 'name',
+            stylehead: 'font-size:20px;color:red;font-weight:bolder;',
+            stylecolumn: 'font-size:10px;color:blue;'
           },
           {
             title: '性别',
@@ -623,6 +625,8 @@ app.use(Table);
 | ------ | -------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------- | ------ |
 | key    | 列的唯一标识                                                                                                                                             | String                    | ``     |
 | title  | 表头标题                                                                                                                                                 | String                    | ``     |
+| stylehead  | 表头样式                                                                                                                                                 | String                    | ``     |
+| stylecolumn  | 列样式                                                                                                                                                 | String                    | ``     |
 | align  | 列的对齐方式，可选值`left`,`center`,`right`                                                                                                              | String                    | `left` |
 | sorter | 排序，可选值有 `true`,`function`, `default`, 其中 `default`表示点击之后可能会依赖接口, `function`可以返回具体的排序函数, `default`表示采用默认的排序算法 | Boolean、Function、String | -      |
 | render | 自定义渲染列数据，优先级高                                                                                                                               | Function(record)          | -      |

src/packages/__VUE/table/index.taro.vue

@@ -9,6 +9,7 @@
             v-for="item in columns"
             :key="item.key"
             @click="handleSorterClick(item)"
+            :style="item.stylehead"
           >
             {{ item.title }}
             <slot name="icon"></slot>
@@ -23,6 +24,7 @@
             :class="cellClasses(getColumnItem(value))"
             v-for="[value, render] in sortDataItem()"
             :key="value"
+            :style="getColumnItemStyle(value)"
           >
             <RenderColumn
               :slots="[render, item[value]]"

src/packages/__VUE/table/index.vue

@@ -9,6 +9,7 @@
             v-for="item in columns"
             :key="item.key"
             @click="handleSorterClick(item)"
+            :style="item.stylehead"
           >
             {{ item.title }}
             <slot name="icon"></slot>
@@ -23,6 +24,7 @@
             :class="cellClasses(getColumnItem(value))"
             v-for="[value, render] in sortDataItem()"
             :key="value"
+            :style="getColumnItemStyle(value)"
           >
             <RenderColumn
               :slots="[render, item[value]]"
@@ -36,15 +38,15 @@
         </view>
       </view>
     </view>
-    <view class="nut-table__summary" v-if="summary">
-      <span class="nut-table__summary__text" v-html="summary().value"></span>
-    </view>
     <view class="nut-table__nodata" v-if="!curData.length">
       <div class="nut-table__nodata" :class="{ 'nut-table__nodata--border': bordered }">
         <slot name="nodata"></slot>
         <div v-if="!$slots.nodata" class="nut-table__nodata__text"> {{ translate('noData') }} </div>
       </div>
     </view>
+    <view class="nut-table__summary" v-if="summary">
+      <span class="nut-table__summary__text" v-html="summary().value"></span>
+    </view>
   </view>
 </template>
 

src/packages/__VUE/table/types.ts

@@ -3,6 +3,8 @@ export interface TableColumnProps {
   key?: string;
   title?: string;
   align?: string;
+  stylehead?: string;
+  stylecolumn?: string;
   sorter?: Function;
   render?: (rowData?: object, rowIndex?: number) => VNodeChild | string | VNode;
 }