commit message

manager/src/views/my-components/tree-table/Table/TableHeader.js

@@ -0,0 +1,108 @@
+import Checkbox from "../Checkbox/Checkbox"; // eslint-disable-line
+import { mixins } from "./utils";
+
+/* eslint-disable no-underscore-dangle */
+export default {
+  name: "TreeTable__header",
+  mixins: [mixins],
+  data() {
+    return {};
+  },
+  computed: {
+    table() {
+      return this.$parent;
+    }
+  },
+  methods: {
+    toggleAllChecked(checked) {
+      this.table.bodyData = this.table.bodyData.map(row => ({
+        ...row,
+        _isChecked: checked
+      }));
+    }
+  },
+  render() {
+    // className
+    function getClassName(type, { headerAlign, key }) {
+      const certainType = this.validateType(
+        type,
+        ["cell", "inner"],
+        "getClassName"
+      );
+      const classList = [];
+      if (key == "_normalIndex") {
+        classList.push(`${this.prefixCls}--center-cell`);
+      }
+      if (certainType.cell) {
+        classList.push(`${this.prefixCls}__header-cell`);
+        if (this.table.border) {
+          classList.push(`${this.prefixCls}--border-cell`);
+        }
+        if (["center", "right"].indexOf(headerAlign) > -1) {
+          classList.push(`${this.prefixCls}--${headerAlign}-cell`);
+        }
+      }
+      if (certainType.inner) {
+        classList.push(`${this.prefixCls}__cell-inner`);
+        if (this.table.treeType && this.table.firstProp === key) {
+          classList.push(`${this.prefixCls}--firstProp-header-inner`);
+        }
+      }
+      return classList.join(" ");
+    }
+
+    // 根据type渲染单元格Label
+    function renderLabel(column, columnIndex) {
+      if (
+        this.isSelectionCell(this.table, columnIndex) &&
+        this.selectType === "checkbox"
+      ) {
+        const allCheck = this.table.bodyData.every(row => row._isChecked);
+        const indeterminate =
+          !allCheck && this.table.bodyData.some(row => row._isChecked);
+        return (
+          <Checkbox
+            indeterminate={indeterminate}
+            value={allCheck}
+            onOn-change={checked => this.toggleAllChecked(checked)}
+          ></Checkbox>
+        );
+      }
+      return column.title ? column.title : "";
+    }
+
+    // Template
+    return (
+      <table
+        cellspacing="0"
+        cellpadding="0"
+        border="0"
+        class={`${this.prefixCls}__header`}
+      >
+        {/* <colgroup>
+          {this.table.tableColumns.map(column => (
+            <col
+              width={column.computedWidth || column.minWidth || column.width}
+            ></col>
+          ))}
+        </colgroup> */}
+        <thead>
+          <tr class={`${this.prefixCls}__header-row`}>
+            {
+              this.table.tableColumns.map((column, columnIndex) =>
+                column.key ? (
+                  <th class={getClassName.call(this, "cell", column)}>
+                    <div class={getClassName.call(this, "inner", column)}>
+                      {renderLabel.call(this, column, columnIndex)}
+                    </div>
+                  </th>
+                ) : (
+                  ""
+                )
+              )}
+          </tr>
+        </thead>
+      </table>
+    );
+  }
+};