merge

src/component/table/index.vue

@@ -32,7 +32,7 @@ export interface TableProps {
   page?: Recordable;
   columns: Recordable[];
   dataSource: Recordable[];
-  defaultToolbar?: boolean | Recordable[];
+  defaultToolbar?: boolean | any[];
   selectedKey?: string;
   selectedKeys?: Recordable[];
   indentSize?: number;
@@ -60,6 +60,7 @@ const props = withDefaults(defineProps<TableProps>(), {
   childrenColumnName: "children",
   dataSource: () => [],
   selectedKeys: () => [],
+  defaultToolbar: false,
   selectedKey: "",
   maxHeight: "auto",
   even: false,
@@ -518,9 +519,6 @@ const childrenExpandSpace = computed(() => {
   );
 });
 
-/**
- * @remark 排除 hide 列
- */
 const renderFixedStyle = (column: any, columnIndex: number) => {
   if (column.fixed) {
     if (column.fixed == "left") {
@@ -563,6 +561,55 @@ const renderFixedStyle = (column: any, columnIndex: number) => {
   return {} as StyleValue;
 };
 
+/**
+ * @remark 排除 hide 列
+ */
+const renderHeadFixedStyle = (
+  column: any,
+  columnIndex: number,
+  tableHeadColumn: any[]
+) => {
+  if (column.fixed) {
+    if (column.fixed == "left") {
+      var left = 0;
+      for (var i = 0; i < columnIndex; i++) {
+        if (
+          props.columns[i].fixed &&
+          props.columns[i].fixed == "left" &&
+          tableColumnKeys.value.includes(props.columns[i].key)
+        ) {
+          left = left + Number(props.columns[i]?.width?.replace("px", ""));
+        }
+      }
+      return { left: `${left}px` } as StyleValue;
+    } else {
+      var right = 0;
+      for (var i = columnIndex + 1; i < props.columns.length; i++) {
+        if (
+          props.columns[i].fixed &&
+          props.columns[i].fixed == "right" &&
+          tableColumnKeys.value.includes(props.columns[i].key)
+        ) {
+          right = right + Number(props.columns[i]?.width?.replace("px", ""));
+        }
+      }
+      return { right: `${right}px` } as StyleValue;
+    }
+  } else {
+    var isLast = true;
+    for (var i = columnIndex + 1; i < tableHeadColumn.length; i++) {
+      if (
+        tableHeadColumn[i].fixed == undefined &&
+        tableColumnKeys.value.includes(tableHeadColumn[i].key)
+      ) {
+        isLast = false;
+      }
+    }
+    return isLast ? ({ "border-right": "none" } as StyleValue) : {};
+  }
+  return {} as StyleValue;
+};
+
 /**
  * @remark 排除 hide 列
  */
@@ -628,6 +675,19 @@ const totalRowMethod = (column: any, dataSource: any[]) => {
   return total;
 };
 
+const showToolbar = (toolbarName: string) => {
+  if (props.defaultToolbar instanceof Array) {
+    return props.defaultToolbar.includes(toolbarName);
+  }
+  return props.defaultToolbar;
+};
+
+const toolbarStyle = (toolbarName: string) => {
+  if (props.defaultToolbar instanceof Array) {
+    return { order: props.defaultToolbar.indexOf(toolbarName) } as StyleValue;
+  }
+};
+
 onBeforeUnmount(() => {
   window.onresize = null;
 });
@@ -642,7 +702,12 @@ onBeforeUnmount(() => {
           <slot name="toolbar"></slot>
         </div>
         <div v-if="defaultToolbar" class="layui-table-tool-self">
-          <lay-dropdown updateAtScroll>
+          <!-- 筛选 -->
+          <lay-dropdown
+            v-if="showToolbar('filter')"
+            updateAtScroll
+            :style="toolbarStyle('filter')"
+          >
             <div class="layui-inline" title="筛选" lay-event>
               <i class="layui-icon layui-icon-slider"></i>
             </div>
@@ -660,15 +725,28 @@ onBeforeUnmount(() => {
               </div>
             </template>
           </lay-dropdown>
+
+          <!-- 导出 -->
           <div
+            v-if="showToolbar('export')"
             class="layui-inline"
             title="导出"
             lay-event
+            :style="toolbarStyle('export')"
             @click="exportData()"
           >
             <i class="layui-icon layui-icon-export"></i>
           </div>
-          <div class="layui-inline" title="打印" lay-event @click="print()">
+
+          <!-- 打印 -->
+          <div
+            v-if="showToolbar('print')"
+            :style="toolbarStyle('print')"
+            class="layui-inline"
+            title="打印"
+            lay-event
+            @click="print()"
+          >
             <i class="layui-icon layui-icon-print"></i>
           </div>
         </div>
@@ -739,7 +817,11 @@ onBeforeUnmount(() => {
                           {
                             textAlign: column.align,
                           },
-                          renderFixedStyle(column, columnIndex),
+                          renderHeadFixedStyle(
+                            column,
+                            columnIndex,
+                            tableHeadColumn
+                          ),
                         ]"
                       >
                         <template v-if="column.type == 'checkbox'">