htui-yllkbz 1.4.18 → 1.4.20

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "htui-yllkbz",
-  "version": "1.4.18",
+  "version": "1.4.20",
   "port": "8082",
   "typings": "types/index.d.ts",
   "main": "lib/htui.common.js",

package/src/packages/HtTable/htTableColumn.vue

@@ -210,7 +210,9 @@
           <span v-else>--</span>
         </template>
         <!-- 其他 -->
-        <span v-else>{{ getPropByPath(row, item.key) }}</span>
+        <span :style="item.style" v-else>{{
+          getPropByPath(row, item.key)
+        }}</span>
       </slot>
     </template>
     <!-- 处理重定义table头相关信息 header_key -->

package/src/packages/HtTable/index.vue

@@ -4,7 +4,7 @@
  * @Author: hutao
  * @Date: 2021-11-11 11:23:24
  * @LastEditors: hutao
- * @LastEditTime: 2023-04-11 18:32:23
+ * @LastEditTime: 2023-04-17 18:01:05
 -->
 <template>
   <div v-loading="state.loading" style="background:#fff">
@@ -32,7 +32,9 @@
         :show-header="showHeader"
         :empty-text="emptyText || '暂无数据'"
         :row-style="rowStyle"
+        :cell-style="cellStyle"
         :row-class-name="rowClassName"
+        :cell-class-name="cellClassName"
         :current-row-key="currentRowKey"
         :highlight-current-row="highlightCurrentRow"
         :row-key="rowKey || 'id'"
@@ -133,12 +135,38 @@
             </slot>
           </template>
         </el-table-column>
+
         <template v-for="(item, index) in state.showColumns">
           <HtTableColumn
             :key="`${item.key}_${index}`"
             :item="item"
             @showFiles="showFiles"
           >
+            <template
+              v-for="child in allChildren"
+              :slot="child.key"
+              slot-scope="scope"
+            >
+              <slot
+                :name="child.key"
+                :row="scope.row"
+                :column="scope.column"
+                :rowIndex="scope.rowIndex"
+              >
+              </slot>
+            </template>
+            <template
+              v-for="child in allChildren"
+              slot-scope="{ column, $index }"
+              :slot="'header_' + child.key"
+            >
+              <slot
+                :name="'header_' + child.key"
+                :column="column"
+                :$index="$index"
+              ></slot>
+            </template>
+
             <template :slot="item.key" slot-scope="scope">
               <slot
                 :name="item.key"
@@ -346,6 +374,7 @@ export default class HtTable extends Vue {
   @Prop() fit?: boolean;
   @Prop() showHeader?: boolean;
   @Prop() rowClassName?: any;
+  @Prop() cellClassName?: any;
   /** 是否启用复选框 */
   @Prop() checked!: boolean;
   /** 设置的禁用字段值--与check同步 */
@@ -355,6 +384,7 @@ export default class HtTable extends Vue {
   @Prop() currentRowKey?: string | number;
   @Prop() highlightCurrentRow?: boolean;
   @Prop() rowStyle?: any;
+  @Prop() cellStyle?: any;
   @Prop() hideOrder?: boolean;
   @Prop() pageInfo?: PageInfoType;
   @Prop() emptyText?: string | number;
@@ -559,6 +589,16 @@ export default class HtTable extends Vue {
     const data = showColumns.filter((item) => obj[item.key as string]);
     return data;
   }
+  get allChildren() {
+    const { showColumns } = this.state;
+    let allchildren: Column[] = [];
+    showColumns.forEach((item) => {
+      if (item.children) {
+        allchildren = [...allchildren, ...item.children];
+      }
+    });
+    return allchildren;
+  }
 
   /** 监听 */
   @Watch('pageInfo')

package/src/packages/type.ts

@@ -4,7 +4,7 @@
  * @Author: hutao
  * @Date: 2021-10-25 17:05:17
  * @LastEditors: hutao
- * @LastEditTime: 2023-04-09 10:34:44
+ * @LastEditTime: 2023-04-14 10:35:56
  */
 /** 初始的默认条数 */
 export const defalutPageSize = 10
@@ -63,7 +63,7 @@ export interface Column {
   headerAlign?: 'left' | 'right' | 'center';
   className?: string;
   labelClassName?: string;
-
+  style?: string;
   /** 是否隐藏当前列 */
   hide?: boolean;
   /**  时间是否跨行展示 */

package/src/views/About.vue

@@ -4,7 +4,7 @@
  * @Author: hutao
  * @Date: 2021-11-15 14:41:40
  * @LastEditors: hutao
- * @LastEditTime: 2023-04-09 18:46:03
+ * @LastEditTime: 2023-04-17 18:04:07
 -->
 <template>
   <div>
@@ -32,7 +32,7 @@
       <HtTable
         :data="state.data"
         :checked="true"
-        :isExpand="false"
+        :isExpand="true"
         :spanMethodProps="{
           colRows: ['name', 'age'],
           sameColRows: [],
@@ -41,13 +41,14 @@
         :height="500"
         :columns="state.columns"
       >
-        jjjj
-        <template slot="name" slot-scope="{ row }">
-          ----{{ row.name }}----yy
-        </template>
-        <template slot="time1" slot-scope="{ row }">
-          ----{{ row.name }}----yy
+        <!-- <template slot="namey">
+          <template slot="times" slot-scope="{ row }">
+            {{ row.name }}----外面
+          </template>
         </template>
+        <template slot="times" slot-scope="{ row }">
+          {{ row.name }}----yy1
+        </template> -->
         <template slot="header_time1">
           次数
         </template>
@@ -98,6 +99,7 @@ export default class Index extends Vue {
       {
         name: '胡涛',
         selectable: true,
+        times: 1,
 
         age: 12,
         sex:
@@ -108,6 +110,7 @@ export default class Index extends Vue {
       },
       {
         name: '胡涛',
+        times: 1,
         age: 12,
         selectable: false,
         sex: 'e49961a4f385e5d341ce3a01ee674c90ea9e037b734228fe26753a01ee674c90',
@@ -118,6 +121,7 @@ export default class Index extends Vue {
       {
         name: '胡涛1',
         age: 13,
+        times: 1,
         sex: 'tt',
         id: 3,
         test: { title: '测试' },
@@ -126,6 +130,7 @@ export default class Index extends Vue {
       {
         name: '胡涛',
         age: 13,
+        times: 4,
         file: [],
         sex: 'tt',
         id: 4,
@@ -135,6 +140,7 @@ export default class Index extends Vue {
       {
         name: '胡涛',
         age: 12,
+        times: 8,
         sex: 'tt',
         id: 41,
         test: { title: '测试' },
@@ -149,6 +155,7 @@ export default class Index extends Vue {
         property: 'base',
         disabled: true,
         deafaultShow: true,
+        style: 'color:red',
       },
       {
         title: 'selectable',
@@ -166,8 +173,8 @@ export default class Index extends Vue {
           },
           {
             title: '名',
-            key: 'time1',
-            type: 'date',
+            key: 'times',
+
             align: 'center',
           },
         ],