设置按钮弹窗

src/components/TableHead/src/TableHead.vue

@@ -18,17 +18,18 @@
           style="margin-right: 15px;"
         ></SearchNormal> -->
         <!-- 右侧按钮 -->
-        <ButtonBase :Butttondata="buttonsRight" @button-base-click="buttonBaseClick" />
+        <ButtonBase :Butttondata="buttonsRight" @button-base-click="buttonBaseClick" @updata-table-columns="updataTableColumns"
+    :allSchemas="allSchemas" ref="rowDropRef"/>
       </div>
     </div>
     <slot></slot>
   </div>
   <!-- 字段设置弹窗 -->
-  <rowDrop 
+  <!-- <rowDrop 
     ref="rowDropRef"
     @updata-table-columns="updataTableColumns"
     :allSchemas="allSchemas"
-  />
+  /> -->
   <!-- 高级筛选 -->
   <SearchHigh
     ref="searchHigh_Ref"
@@ -126,7 +127,7 @@ watch(
   const buttonBaseClick = (val, item) => {
     // 设置按钮 
     if (val == 'set') {
-      rowDropRef.value.popoverVisible = true
+      rowDropRef.value.popoverVisible = !rowDropRef.value.popoverVisible
     } else if (val == 'filtrate') {
       searchHigh_Ref.value.popoverVisible = true
     } else {
@@ -167,12 +168,17 @@ watch(
     display: flex;
     justify-content: space-between;
   }
-
+.tableNavLeftBtns{
+  display: flex;
+  ::v-deep(>div){
+    margin-right: 10px;
+  }
+}
   .tableNavRightBtns{
     display: flex;
     margin-left: 10px;
-    .currenButton .el-button {
-      margin-left: 10px !important;
+    ::v-deep(>div){
+      margin-left: 10px;
     }
   }
 }

src/components/XButton/src/ButtonBase.vue

@@ -1,38 +1,84 @@
 <template>
-  <el-button 
-    v-for="(item, index) in Butttondata" :key="index"
-    v-show="!item.hide"
-    :type="item.type" 
-    :color="item.color"
-    :link = "item.link ? item.link : false" 
-    v-hasPermi="[item.hasPermi] || []"
-    @click="buttonBaseClick(item.name,item,$event)"
-  >
-  <Icon v-if="item.icon" :icon="item.icon" class="mr-1px" />
-  {{ item.label }}
-  </el-button>
+  <div v-for="(item, index) in Butttondata" :key="index">
+    <el-button
+      v-show="!item.hide"
+      :type="item.type"
+      :color="item.color"
+      :link="item.link ? item.link : false"
+      v-hasPermi="[item.hasPermi] || []"
+      v-if="item.name != 'set'"
+      @click="buttonBaseClick(item.name, item, $event)"
+    >
+      <Icon v-if="item.icon" :icon="item.icon" class="mr-1px" />
+      {{ item.label }}
+    </el-button>
+    <!-- 设置按钮 -->
+    <el-popover
+      :visible="popoverVisible"
+      placement="bottom"
+      :width="300"
+      trigger="click"
+      v-if="item.name == 'set'&&!item.hide"
+    >
+      <rowDrop
+        ref="rowDropRef"
+        @updata-table-columns="updataTableColumns"
+        :allSchemas="allSchemas"
+        @closeRowDrop="closeRowDrop"
+        @updataTableColumns="updataTableColumns"
+      />
+      <template #reference>
+        <el-button
+          v-show="!item.hide"
+          :type="item.type"
+          :color="item.color"
+          :link="item.link ? item.link : false"
+          v-hasPermi="[item.hasPermi] || []"
+          @click="buttonBaseClick(item.name, item, $event)"
+        >
+          <Icon v-if="item.icon" :icon="item.icon" class="mr-1px" />
+          {{ item.label }}
+        </el-button>
+      </template>
+    </el-popover>
+  </div>
   <slot></slot>
 </template>
 <script setup>
- import { Plus } from '@element-plus/icons-vue'
- import { clearButtonBlurHandle } from '@/utils/index'
-  const props = defineProps({
-    Butttondata: {
-      type: Array,
-      default: () => {
-        return []
-      }
-    },
-  })
-
-  // 传递给父类
-  const emit = defineEmits([
-    'buttonBaseClick',
-  ])
-
-  const buttonBaseClick = (val, item, $event) => {
-    clearButtonBlurHandle($event)//解决el-button点击后颜色不恢复问题
-    emit('buttonBaseClick', val, item, $event)
+import { Plus } from '@element-plus/icons-vue'
+import { clearButtonBlurHandle } from '@/utils/index'
+import rowDrop from '@/components/rowDrop/index.vue'
+const props = defineProps({
+  Butttondata: {
+    type: Array,
+    default: () => {
+      return []
+    }
+  },
+  allSchemas: {
+    type: Object,
+    default: null
   }
+})
+
+console.log('buttonsRight', props.Butttondata)
+// 传递给父类
+const emit = defineEmits(['buttonBaseClick', 'updataTableColumns'])
 
+const buttonBaseClick = (val, item, $event) => {
+  clearButtonBlurHandle($event) //解决el-button点击后颜色不恢复问题
+  emit('buttonBaseClick', val, item, $event)
+}
+const popoverVisible = ref(false)
+// 关闭页面
+const closeRowDrop = () => {
+  popoverVisible.value = false
+}
+defineExpose({
+  popoverVisible
+})
+// 更新主列表字段
+const updataTableColumns = (val) => {
+  emit('updataTableColumns', val)
+}
 </script>

src/components/rowDrop/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <Dialog title="字段设置"  width="270" v-model="popoverVisible" :scroll="true" :maxHeight="500">
+  <!-- <Dialog title="字段设置"  width="270" v-model="popoverVisible" :scroll="true" :maxHeight="500"> -->
     <div class="test_wrapper" @dragover="dragover($event)">
       <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handlecheckallchange">全部</el-checkbox>
         <el-checkbox-group v-model="checkedDataList" @change="handlecheckedchange">
@@ -10,11 +10,13 @@
           </draggable>
         </el-checkbox-group>
     </div>
-    <template #footer>
+    <div class="footer">
+    <!-- <template #footer> -->
       <el-button size="small" @click="reset">重置</el-button>
       <el-button size="small" @click="closeRowDrop">关闭</el-button>
-    </template>
-  </Dialog>
+    <!-- </template> -->
+  </div>
+  <!-- </Dialog> -->
 </template>
 <script setup lang="ts">
 import { ElMessageBox } from 'element-plus'
@@ -68,7 +70,7 @@ const reset = () => {
 
 // 关闭页面
 const closeRowDrop = () => {
-  popoverVisible.value = false
+  emit('closeRowDrop')
 }
 
 // 保存
@@ -182,7 +184,8 @@ const updataTableColumns = (val) => {
 
 // 传递给父类
 const emit = defineEmits([
-  'updataTableColumns'
+  'updataTableColumns',
+  'closeRowDrop'
 ])
 
 /** 初始化 **/
@@ -202,4 +205,11 @@ defineExpose({
 //   padding: 15px;
 //   border-top: #eee solid 1px;
 // }
+.test_wrapper{
+  max-height: calc(100vh - 350px);
+  overflow-y: auto;
+}
+.footer{
+  margin-top: 10px;
+}
 </style>