From 3092728f1754854c01ecd0667b70fc6344b4ff44 Mon Sep 17 00:00:00 2001
From: zepeng <75007029+yj-liuzepeng@users.noreply.github.com>
Date: Tue, 31 Oct 2023 01:19:28 +0800
Subject: [PATCH] =?UTF-8?q?perf:=20=E4=BC=98=E5=8C=96`PureTableBar`?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6=E7=9A=84=E5=88=97=E8=AE=BE=E7=BD=AE=E5=BC=B9?=
 =?UTF-8?q?=E5=87=BA=E6=A1=86=EF=BC=8C=E8=AE=BE=E7=BD=AE=E6=9C=80=E5=A4=A7?=
 =?UTF-8?q?=E9=AB=98=E5=BA=A6=EF=BC=8C=E8=B6=85=E5=87=BA=E5=8F=AF=E6=BB=9A?=
 =?UTF-8?q?=E5=8A=A8=20(#780)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/RePureTableBar/src/bar.tsx | 84 ++++++++++++-----------
 1 file changed, 43 insertions(+), 41 deletions(-)

diff --git a/src/components/RePureTableBar/src/bar.tsx b/src/components/RePureTableBar/src/bar.tsx
index 092f42759..913c0a2b5 100644
--- a/src/components/RePureTableBar/src/bar.tsx
+++ b/src/components/RePureTableBar/src/bar.tsx
@@ -262,7 +262,7 @@ export default defineComponent({
                 v-slots={reference}
                 placement="bottom-start"
                 popper-style={{ padding: 0 }}
-                width="160"
+                width="200"
                 trigger="click"
               >
                 <div class={[topClass.value]}>
@@ -279,48 +279,50 @@ export default defineComponent({
                 </div>
 
                 <div class="pt-[6px] pl-[11px]">
-                  <el-checkbox-group
-                    v-model={checkedColumns.value}
-                    onChange={value => handleCheckedColumnsChange(value)}
-                  >
-                    <el-space
-                      direction="vertical"
-                      alignment="flex-start"
-                      size={0}
+                  <el-scrollbar max-height="36vh">
+                    <el-checkbox-group
+                      v-model={checkedColumns.value}
+                      onChange={value => handleCheckedColumnsChange(value)}
                     >
-                      {checkColumnList.map(item => {
-                        return (
-                          <div class="flex items-center">
-                            <DragIcon
-                              class={[
-                                "drag-btn w-[16px] mr-2",
-                                isFixedColumn(item)
-                                  ? "!cursor-no-drop"
-                                  : "!cursor-grab"
-                              ]}
-                              onMouseenter={(event: {
-                                preventDefault: () => void;
-                              }) => rowDrop(event)}
-                            />
-                            <el-checkbox
-                              key={item}
-                              label={item}
-                              onChange={value =>
-                                handleCheckColumnListChange(value, item)
-                              }
-                            >
-                              <span
-                                title={item}
-                                class="inline-block w-[120px] truncate hover:text-text_color_primary"
+                      <el-space
+                        direction="vertical"
+                        alignment="flex-start"
+                        size={0}
+                      >
+                        {checkColumnList.map(item => {
+                          return (
+                            <div class="flex items-center">
+                              <DragIcon
+                                class={[
+                                  "drag-btn w-[16px] mr-2",
+                                  isFixedColumn(item)
+                                    ? "!cursor-no-drop"
+                                    : "!cursor-grab"
+                                ]}
+                                onMouseenter={(event: {
+                                  preventDefault: () => void;
+                                }) => rowDrop(event)}
+                              />
+                              <el-checkbox
+                                key={item}
+                                label={item}
+                                onChange={value =>
+                                  handleCheckColumnListChange(value, item)
+                                }
                               >
-                                {item}
-                              </span>
-                            </el-checkbox>
-                          </div>
-                        );
-                      })}
-                    </el-space>
-                  </el-checkbox-group>
+                                <span
+                                  title={item}
+                                  class="inline-block w-[120px] truncate hover:text-text_color_primary"
+                                >
+                                  {item}
+                                </span>
+                              </el-checkbox>
+                            </div>
+                          );
+                        })}
+                      </el-space>
+                    </el-checkbox-group>
+                  </el-scrollbar>
                 </div>
               </el-popover>
             </div>