ct-component-plus 0.0.43 → 0.0.44

package/packages/components/table/src/table.vue

@@ -1,287 +1,288 @@
-<template>
-  <div :class="[ns.b()]">
-    <div :class="[ns.e('container')]">
-      <el-table
-        ref="tableRef"
-        :class="[ns.e('body')]"
-        :data="showData"
-        :span-method="spanMethod"
-        @selection-change="handleSelectChange"
-        :row-key="rowKey || 'rowKey'"
-        v-bind="$attrs">
-        <el-table-column
-          v-if="isMultiSelect"
-          type="selection"
-          width="88"
-          v-bind="multiSelectAttr"
-          :reserve-selection="true"
-          :selectable="judgeSelectable">
-        </el-table-column>
-        <el-table-column
-          v-for="(column, index) in columnData"
-          :key="column.value + '-' + column.label"
-          :label="column.label + ''"
-          :prop="column.value || ''"
-          :width="judgeWidth(column, index)"
-          :min-width="judgeMinWidth(column, index)"
-          :sort-orders="['ascending', 'descending']"
-          :sortable="column.sortable ? 'custom' : false"
-          :align="getColumnAlign(column)"
-          :fixed="column.fixed || false"
-          :show-overflow-tooltip="showOverflowTooltip"
-          v-bind="column.rawAttr || {}">
-          <template #header="scope" v-if="column.slotHeader">
-            <slot
-              :name="column.value + 'Header'"
-              v-bind="scope"
-              :column="column"
-              :label="column.label"
-              :value="column.value">
-            </slot>
-          </template>
-          <template #default="scope">
-            <slot
-              :name="column.value"
-              :value="scope.row[column.value]"
-              v-bind="scope"
-              :column="column">
-              <span>{{ scope.row[column.value] }}</span>
-            </slot>
-            <el-table-column
-              v-for="(column1, index) in column.children"
-              :key="column1.value + '-' + column1.label"
-              :label="column1.label + ''"
-              :prop="column1.value"
-              :width="judgeWidth(column1, index)"
-              :min-width="judgeMinWidth(column1, index)"
-              :sort-orders="['ascending', 'descending']"
-              :sortable="column1.sortable ? 'custom' : false"
-              :align="getColumnAlign(column1)"
-              :fixed="column1.fixed || false"
-              :show-overflow-tooltip="showOverflowTooltip"
-              v-bind="column1.rawAttr || {}">
-              <template #default="scope">
-                <slot
-                  :name="column1.value"
-                  :value="scope.row[column1.value]"
-                  v-bind="scope"
-                  :column="column1">
-                  <span>{{ scope.row[column1.value] }}</span>
-                </slot>
-              </template>
-            </el-table-column>
-          </template>
-        </el-table-column>
-        <template #empty>
-          <slot name="empty">
-            <component
-              :is="tableEmptyDom"
-              v-if="tableEmptyDom"
-              :text="emptyText">
-            </component>
-            <span v-else>{{ emptyText }}</span>
-          </slot>
-        </template>
-      </el-table>
-      <ct-pagination
-        :class="ns.e('pagination')"
-        :pageSize="pageSize"
-        :total="total"
-        :current-page="pageNo"
-        v-if="pageSize"
-        @current-change="handleCurrentChange"></ct-pagination>
-    </div>
-    <Teleport :to="`#${teleportDom}`" v-if="teleportDom && teleportStatus">
-      <table-sort v-model:sort-obj="sortObj" :sort-list="sortList"></table-sort>
-    </Teleport>
-  </div>
-</template>
-
-<script setup>
-import { computed, inject, onMounted, ref, watch } from "vue";
-import { useNamespace } from "../../../hooks";
-import { copyObj } from "../../../utils";
-import { tableEmits, tableProps } from "./index";
-import TableSort from "./TableSort.vue";
-const props = defineProps(tableProps);
-const emit = defineEmits(tableEmits);
-const tableEmptyDom = inject("$tableEmptyDom", null);
-
-const ns = useNamespace("table");
-const tableRef = ref(null);
-const total = computed(() => {
-  return props.tableProps.tableData?.length;
-});
-const pageSize = computed(() => {
-  return Number(props.pagination);
-});
-const pageNo = ref(1);
-const handleCurrentChange = (val) => {
-  pageNo.value = val;
-};
-const showData = computed(() => {
-  // const table = props.tableProps.tableData.map((item, index) => {
-  //   return {
-  //     ...item,
-  //     rowKey: `ct-row-${index}`,
-  //   };
-  // });
-  const table = props.tableProps.tableData;
-  if (props.pagination) {
-    return table.slice(
-      (pageNo.value - 1) * pageSize.value,
-      pageNo.value * pageSize.value
-    );
-  } else {
-    return table || [];
-  }
-});
-const columnData = computed(() => {
-  return props.tableProps.columnData || [];
-});
-const getColumnAlign = (column) => {
-  if (column.align) {
-    return column.align;
-  }
-  if (props.alignLeftKeys && props.alignLeftKeys.includes(column.value)) {
-    return "left";
-  }
-  if (props.alignRightKeys && props.alignRightKeys.includes(column.value)) {
-    return "right";
-  }
-  return "center";
-};
-const judgeWidth = (column, index) => {
-  // 判断处理column的width
-  const columnWidth = props.columnWidth;
-  return (
-    column.fixedWidth ||
-    (columnWidth &&
-      typeof columnWidth[index] === "object" &&
-      columnWidth[index].fixed) ||
-    ""
-  );
-};
-const judgeMinWidth = (column, index) => {
-  // 判断处理column的min-width
-  const columnWidth = props.columnWidth;
-  if (column.width) {
-    return column.width;
-  }
-  if (columnWidth && columnWidth[index]) {
-    return typeof columnWidth[index] === "object"
-      ? columnWidth[index].width
-      : columnWidth[index];
-  }
-  return "auto";
-};
-
-let spanObj = {};
-watch(
-  () => props.mergeList,
-  (newVal, oldVal) => {
-    /**
-     * 将数组型的合并单元格数据转换成对象型，转换示例如下：
-     * {row: 1, col: 1, span: [2, 2]} =>
-     * {
-     *  1: { 1: [2,2], 2: [0,0] },
-     *  2: { 1: [0,0], 2: [0,0] }
-     * }
-     * 这里的合并数据对象的第一层的key表示对应的行，第二层的key对应的是列， 行和列都是从1开始的索引
-     */
-    let spanObjRes = {};
-    if (Array.isArray(newVal)) {
-      newVal.forEach((item) => {
-        const { row, col, span } = item;
-        const spanRow = span ? span[0] : 0;
-        const spanCol = span ? span[1] : 0;
-        // 处理一项合并单元格数据，设置对应的行和列的合并数据，以及涉及到的其他行和列都需要被合并
-        for (let i = 1; i <= spanRow; i++) {
-          for (let j = 1; j <= spanCol; j++) {
-            // 除了起始行、起始列，其他行和列都是需要被合并的，即都需要设置为[0,0]
-            let res = i === 1 && j === 1 ? span : [0, 0];
-            const rowKey = row + i - 1;
-            const colKey = col + j - 1;
-            if (spanObjRes[rowKey]) {
-              spanObjRes[rowKey][colKey] = res;
-            } else {
-              spanObjRes[rowKey] = {
-                [colKey]: res,
-              };
-            }
-          }
-        }
-      });
-    }
-    spanObj = spanObjRes;
-  },
-  { immediate: true }
-);
-const spanMethod = ({ rowIndex, columnIndex }) => {
-  const rowKey = rowIndex + 1;
-  const colKey = columnIndex + 1;
-
-  if (spanObj[rowKey]) {
-    if (spanObj[rowKey][colKey]) {
-      return spanObj[rowKey][colKey];
-    }
-  }
-  return [1, 1];
-};
-
-const selectedArr = computed({
-  get() {
-    return props.multiSelect || [];
-  },
-  set(val) {
-    emit("update:multiSelect", val);
-  },
-});
-watch(
-  () => props.multiSelect,
-  (val, oldVal) => {
-    if (val && val.length == 0) {
-      tableRef.value.clearSelection();
-    }
-  }
-);
-function handleSelectChange(val) {
-  selectedArr.value = copyObj(val);
-}
-function judgeSelectable(row) {
-  if (props.selectableFn) {
-    return props.selectableFn(row);
-  } else {
-    return true;
-  }
-}
-
-const teleportStatus = ref(false);
-const sortObj = computed({
-  get() {
-    return props.defaultSort;
-  },
-  set(val) {
-    emit("update:defaultSort", val);
-  },
-});
-const sortList = computed(() => {
-  return columnData.value.filter((item) => item.sortable);
-});
-onMounted(() => {
-  teleportStatus.value = true; //直到dom挂载完毕再挂载teleport组件
-});
-
-defineExpose({ tableRef });
-</script>
-<style lang="less" scoped>
-.ct-table__body {
-  width: 100%;
-}
-
-.ct-table__pagination {
-  margin-top: 24px;
-  display: flex;
-  justify-content: flex-end;
-}
-</style>
+<template>
+  <div :class="[ns.b()]">
+    <div :class="[ns.e('container')]">
+      <el-table
+        ref="tableRef"
+        :class="[ns.e('body')]"
+        :data="showData"
+        :span-method="spanMethod"
+        @selection-change="handleSelectChange"
+        :row-key="rowKey || 'rowKey'"
+        v-bind="$attrs"
+        v-sticky="sticky">
+        <el-table-column
+          v-if="isMultiSelect"
+          type="selection"
+          width="88"
+          v-bind="multiSelectAttr"
+          :reserve-selection="true"
+          :selectable="judgeSelectable">
+        </el-table-column>
+        <el-table-column
+          v-for="(column, index) in columnData"
+          :key="column.value + '-' + column.label"
+          :label="column.label + ''"
+          :prop="column.value || ''"
+          :width="judgeWidth(column, index)"
+          :min-width="judgeMinWidth(column, index)"
+          :sort-orders="['ascending', 'descending']"
+          :sortable="column.sortable ? 'custom' : false"
+          :align="getColumnAlign(column)"
+          :fixed="column.fixed || false"
+          :show-overflow-tooltip="showOverflowTooltip"
+          v-bind="column.rawAttr || {}">
+          <template #header="scope" v-if="column.slotHeader">
+            <slot
+              :name="column.value + 'Header'"
+              v-bind="scope"
+              :column="column"
+              :label="column.label"
+              :value="column.value">
+            </slot>
+          </template>
+          <template #default="scope">
+            <slot
+              :name="column.value"
+              :value="scope.row[column.value]"
+              v-bind="scope"
+              :column="column">
+              <span>{{ scope.row[column.value] }}</span>
+            </slot>
+            <el-table-column
+              v-for="(column1, index) in column.children"
+              :key="column1.value + '-' + column1.label"
+              :label="column1.label + ''"
+              :prop="column1.value"
+              :width="judgeWidth(column1, index)"
+              :min-width="judgeMinWidth(column1, index)"
+              :sort-orders="['ascending', 'descending']"
+              :sortable="column1.sortable ? 'custom' : false"
+              :align="getColumnAlign(column1)"
+              :fixed="column1.fixed || false"
+              :show-overflow-tooltip="showOverflowTooltip"
+              v-bind="column1.rawAttr || {}">
+              <template #default="scope">
+                <slot
+                  :name="column1.value"
+                  :value="scope.row[column1.value]"
+                  v-bind="scope"
+                  :column="column1">
+                  <span>{{ scope.row[column1.value] }}</span>
+                </slot>
+              </template>
+            </el-table-column>
+          </template>
+        </el-table-column>
+        <template #empty>
+          <slot name="empty">
+            <component
+              :is="tableEmptyDom"
+              v-if="tableEmptyDom"
+              :text="emptyText">
+            </component>
+            <span v-else>{{ emptyText }}</span>
+          </slot>
+        </template>
+      </el-table>
+      <ct-pagination
+        :class="ns.e('pagination')"
+        :pageSize="pageSize"
+        :total="total"
+        :current-page="pageNo"
+        v-if="pageSize"
+        @current-change="handleCurrentChange"></ct-pagination>
+    </div>
+    <Teleport :to="`#${teleportDom}`" v-if="teleportDom && teleportStatus">
+      <table-sort v-model:sort-obj="sortObj" :sort-list="sortList"></table-sort>
+    </Teleport>
+  </div>
+</template>
+
+<script setup>
+import { computed, inject, onMounted, ref, watch } from "vue";
+import { useNamespace } from "../../../hooks";
+import { copyObj } from "../../../utils";
+import { tableEmits, tableProps } from "./index";
+import TableSort from "./TableSort.vue";
+const props = defineProps(tableProps);
+const emit = defineEmits(tableEmits);
+const tableEmptyDom = inject("$tableEmptyDom", null);
+
+const ns = useNamespace("table");
+const tableRef = ref(null);
+const total = computed(() => {
+  return props.tableProps.tableData?.length;
+});
+const pageSize = computed(() => {
+  return Number(props.pagination);
+});
+const pageNo = ref(1);
+const handleCurrentChange = (val) => {
+  pageNo.value = val;
+};
+const showData = computed(() => {
+  // const table = props.tableProps.tableData.map((item, index) => {
+  //   return {
+  //     ...item,
+  //     rowKey: `ct-row-${index}`,
+  //   };
+  // });
+  const table = props.tableProps.tableData;
+  if (props.pagination) {
+    return table.slice(
+      (pageNo.value - 1) * pageSize.value,
+      pageNo.value * pageSize.value
+    );
+  } else {
+    return table || [];
+  }
+});
+const columnData = computed(() => {
+  return props.tableProps.columnData || [];
+});
+const getColumnAlign = (column) => {
+  if (column.align) {
+    return column.align;
+  }
+  if (props.alignLeftKeys && props.alignLeftKeys.includes(column.value)) {
+    return "left";
+  }
+  if (props.alignRightKeys && props.alignRightKeys.includes(column.value)) {
+    return "right";
+  }
+  return "center";
+};
+const judgeWidth = (column, index) => {
+  // 判断处理column的width
+  const columnWidth = props.columnWidth;
+  return (
+    column.fixedWidth ||
+    (columnWidth &&
+      typeof columnWidth[index] === "object" &&
+      columnWidth[index].fixed) ||
+    ""
+  );
+};
+const judgeMinWidth = (column, index) => {
+  // 判断处理column的min-width
+  const columnWidth = props.columnWidth;
+  if (column.width) {
+    return column.width;
+  }
+  if (columnWidth && columnWidth[index]) {
+    return typeof columnWidth[index] === "object"
+      ? columnWidth[index].width
+      : columnWidth[index];
+  }
+  return "auto";
+};
+
+let spanObj = {};
+watch(
+  () => props.mergeList,
+  (newVal, oldVal) => {
+    /**
+     * 将数组型的合并单元格数据转换成对象型，转换示例如下：
+     * {row: 1, col: 1, span: [2, 2]} =>
+     * {
+     *  1: { 1: [2,2], 2: [0,0] },
+     *  2: { 1: [0,0], 2: [0,0] }
+     * }
+     * 这里的合并数据对象的第一层的key表示对应的行，第二层的key对应的是列， 行和列都是从1开始的索引
+     */
+    let spanObjRes = {};
+    if (Array.isArray(newVal)) {
+      newVal.forEach((item) => {
+        const { row, col, span } = item;
+        const spanRow = span ? span[0] : 0;
+        const spanCol = span ? span[1] : 0;
+        // 处理一项合并单元格数据，设置对应的行和列的合并数据，以及涉及到的其他行和列都需要被合并
+        for (let i = 1; i <= spanRow; i++) {
+          for (let j = 1; j <= spanCol; j++) {
+            // 除了起始行、起始列，其他行和列都是需要被合并的，即都需要设置为[0,0]
+            let res = i === 1 && j === 1 ? span : [0, 0];
+            const rowKey = row + i - 1;
+            const colKey = col + j - 1;
+            if (spanObjRes[rowKey]) {
+              spanObjRes[rowKey][colKey] = res;
+            } else {
+              spanObjRes[rowKey] = {
+                [colKey]: res,
+              };
+            }
+          }
+        }
+      });
+    }
+    spanObj = spanObjRes;
+  },
+  { immediate: true }
+);
+const spanMethod = ({ rowIndex, columnIndex }) => {
+  const rowKey = rowIndex + 1;
+  const colKey = columnIndex + 1;
+
+  if (spanObj[rowKey]) {
+    if (spanObj[rowKey][colKey]) {
+      return spanObj[rowKey][colKey];
+    }
+  }
+  return [1, 1];
+};
+
+const selectedArr = computed({
+  get() {
+    return props.multiSelect || [];
+  },
+  set(val) {
+    emit("update:multiSelect", val);
+  },
+});
+watch(
+  () => props.multiSelect,
+  (val, oldVal) => {
+    if (val && val.length == 0) {
+      tableRef.value.clearSelection();
+    }
+  }
+);
+function handleSelectChange(val) {
+  selectedArr.value = copyObj(val);
+}
+function judgeSelectable(row) {
+  if (props.selectableFn) {
+    return props.selectableFn(row);
+  } else {
+    return true;
+  }
+}
+
+const teleportStatus = ref(false);
+const sortObj = computed({
+  get() {
+    return props.defaultSort;
+  },
+  set(val) {
+    emit("update:defaultSort", val);
+  },
+});
+const sortList = computed(() => {
+  return columnData.value.filter((item) => item.sortable);
+});
+onMounted(() => {
+  teleportStatus.value = true; //直到dom挂载完毕再挂载teleport组件
+});
+
+defineExpose({ tableRef });
+</script>
+<style lang="less" scoped>
+.ct-table__body {
+  width: 100%;
+}
+
+.ct-table__pagination {
+  margin-top: 24px;
+  display: flex;
+  justify-content: flex-end;
+}
+</style>

package/packages/components/tabs/index.js

@@ -1,8 +1,8 @@
-import CtTabs from './src/tabs.vue';
-
-/* istanbul ignore next */
-CtTabs.install = function (Vue) {
-  Vue.component('CtTabs', CtTabs);
-};
-
+import CtTabs from './src/tabs.vue';
+
+/* istanbul ignore next */
+CtTabs.install = function (Vue) {
+  Vue.component('CtTabs', CtTabs);
+};
+
 export default CtTabs;