htui-yllkbz 1.2.16 → 1.2.20

package/src/packages/HtTable/index.vue

@@ -5,7 +5,7 @@
  * @Author: hutao
  * @Date: 2021-11-11 11:23:24
  * @LastEditors: hutao
- * @LastEditTime: 2021-12-09 17:29:45
+ * @LastEditTime: 2021-12-12 10:25:50
 -->
 <template>
   <div v-loading="state.loading">
@@ -43,10 +43,12 @@
                 @cell-click="(row, column, cell, event)=>$emit('cell-click',row, column, cell, event)"
                 @cell-dblclick="(row, column, cell, event)=>$emit('cell-dblclick',row, column, cell, event)">
         <el-table-column width="55"
+                         v-if="checked"
                          type='selection'>
         </el-table-column>
         <el-table-column v-if="!hideOrder"
                          label="序号"
+                         :align="'center'"
                          width="55">
           <template slot="header">
             <slot :name="'header_order'"></slot>
@@ -57,16 +59,28 @@
         </el-table-column>
         <el-table-column :label="item.title"
                          :key='item.key'
+                         :fixed="item.fixed"
+                         :align="item.align"
+                         :header-align="item.headerAlign"
+                         :column-key="item.columnKey"
+                         :class-name="item.className"
                          v-for="item in columns"
                          :show-overflow-tooltip="true"
+                         :selectable="item.selectable"
                          :prop="item.key"
-                         :width="item.width||120">
+                         :sortable="item.sortable"
+                         :sort-method="item.sortMethod"
+                         :sort-orders="item.sortOrders"
+                         :formatter="item.formatter"
+                         :sort-by="item.sortBy"
+                         :min-width="item.minWidth"
+                         :width="item.width">
           <template slot-scope="{row,column,rowIndex}">
             <slot :name="item.key"
                   :row="row"
                   :column="column"
-                  :rowIndex="rowIndex">{{row[item.key]}}</slot>
-            {{item.headerSlot}}
+                  :rowIndex="rowIndex">{{getPropByPath(row,item.key)}}</slot>
+
           </template>
           <template slot-scope="{column,$index}"
                     slot="header">
@@ -102,6 +116,7 @@ interface State {
   loading: boolean;
 }
 @Component({
+  name: "HtTable",
   components: {
     PageInfo,
   },
@@ -112,6 +127,8 @@ export default class HtTable extends Vue {
   @Prop() data!: any[];
   /** 是否隐藏分页 */
   @Prop() hidePage!: boolean;
+  /** 是否启用复选框 */
+  @Prop() checked!: boolean;
   @Prop() height?: string | number;
   @Prop() maxHeight?: string | number;
   @Prop() rowKey?: string;
@@ -142,7 +159,56 @@ export default class HtTable extends Vue {
     // console.log("this", this.$props);
     this.setPageInfo(this.pageInfo);
   }
+  getPropByPath(obj: any, path: string, strict: boolean) {
+    let tempObj = obj;
+    path = path.replace(/\[(\w+)\]/g, ".$1");
+    path = path.replace(/^\./, "");
 
+    const keyArr = path.split(".");
+    let i = 0;
+    for (let len = keyArr.length; i < len - 1; ++i) {
+      if (!tempObj && !strict) break;
+      const key = keyArr[i];
+      if (key in tempObj) {
+        tempObj = tempObj[key];
+      } else {
+        if (strict) {
+          throw new Error("please transfer a valid prop path to form item!");
+        }
+        break;
+      }
+    }
+    // return {
+    //   o: tempObj,
+    //   k: keyArr[i],
+    //   v: tempObj ? tempObj[keyArr[i]] : null,
+    // };
+    return tempObj ? tempObj[keyArr[i]] : null;
+  }
+  /** 遍历循环展示row数据 */
+  showValue(row: any, key: string) {
+    if (key) {
+      if (key.includes(".")) {
+        //存在多级的情况
+        //console.log("eval", key, eval(row[key]));
+        // const arrKey = key.split(".");
+        // let data = row;
+        // arrKey.forEach((item) => {
+        //   if (data[item]) {
+        //     data = data[item];
+        //   } else {
+        //     data = "";
+        //   }
+        // });
+        return "";
+      } else {
+        //如果不存在多级数据
+        return row[key];
+      }
+    } else {
+      return "";
+    }
+  }
   /** 监听 */
   @Watch("pageInfo")
   setPageInfo(val?: PageInfoType) {

package/src/packages/PageInfo/index.vue

@@ -4,7 +4,7 @@
  * @Author: hutao
  * @Date: 2021-12-08 11:30:56
  * @LastEditors: hutao
- * @LastEditTime: 2021-12-09 16:20:43
+ * @LastEditTime: 2021-12-09 18:04:54
 -->
 
 <!--
@@ -44,7 +44,9 @@ interface State {
   };
 }
 
-@Component
+@Component({
+  name: "HtPagination",
+})
 export default class HtPagination extends Vue {
   /**  通用样式 */
   @Prop() comStyle!: string;

package/src/packages/SelectTable/index.vue

@@ -4,7 +4,7 @@
  * @Author: hutao
  * @Date: 2021-11-11 11:06:51
  * @LastEditors: hutao
- * @LastEditTime: 2021-12-08 11:29:19
+ * @LastEditTime: 2021-12-12 10:07:34
 -->
 <template>
   <el-popover placement="bottom"
@@ -182,7 +182,7 @@ export default class HtSelectTable extends Vue {
     //
     if (!this.state.config.disabled) {
       const ref: any = this.$refs[this.state.config.key || "ht-table"];
-      console.log("333");
+
       this.state.visible = false;
       ref.clearCheck();
     }

package/src/views/About.vue

@@ -4,7 +4,7 @@
  * @Author: hutao
  * @Date: 2021-11-15 14:41:40
  * @LastEditors: hutao
- * @LastEditTime: 2021-12-09 16:47:22
+ * @LastEditTime: 2021-12-12 09:03:38
 -->
 <template>
   <div>
@@ -45,17 +45,21 @@ export default class Index extends Vue {
   state: State = {
     loading: false,
     data: [
-      { name: "胡涛", age: 12, sex: 0, id: 1 },
-      { name: "胡涛", age: 12, sex: 1, id: 2 },
-      { name: "胡涛", age: 12, sex: 1, id: 3 },
-      { name: "胡涛", age: 12, sex: 0, id: 4 },
+      { name: "胡涛", age: 12, sex: 0, id: 1, test: { title: "测试" } },
+      { name: "胡涛", age: 12, sex: 1, id: 2, test: { title: "测试" } },
+      { name: "胡涛", age: 12, sex: 1, id: 3, test: { title: "测试" } },
+      { name: "胡涛", age: 12, sex: 0, id: 4, test: { title: "测试" } },
     ],
     columns: [
       {
         title: "姓名",
-        key: "name",
+        key: "test.title",
         width: "300px",
       },
+      {
+        title: "姓额外名",
+        key: "name",
+      },
       {
         title: "age",
         key: "age",