升级组件依赖到最新版本

RuoYi

2023-12-01 64036d520f8d1e41390bdf097fb87039701d0efe

 src/components/RightToolbar/index.vue

@@ -1,14 +1,26 @@
<template>

  <div class="top-right-btn">

  <div class="top-right-btn" :style="style">

    <el-row>

      <el-tooltip class="item" effect="dark" :content="showSearch ? '隐藏搜索' : '显示搜索'" placement="top">

      <el-tooltip class="item" effect="dark" :content="showSearch ? '隐藏搜索' : '显示搜索'" placement="top" v-if="search">

        <el-button circle icon="Search" @click="toggleSearch()" />

      </el-tooltip>

      <el-tooltip class="item" effect="dark" content="刷新" placement="top">

        <el-button circle icon="Refresh" @click="refresh()" />

      </el-tooltip>

      <el-tooltip class="item" effect="dark" content="显隐列" placement="top" v-if="columns">

        <el-button circle icon="Menu" @click="showColumn()" />

        <el-button circle icon="Menu" @click="showColumn()" v-if="showColumnsType == 'transfer'"/>

        <el-dropdown trigger="click" :hide-on-click="false" style="padding-left: 12px" v-if="showColumnsType == 'checkbox'">

          <el-button circle icon="Menu" />

          <template #dropdown>

            <el-dropdown-menu>

              <template v-for="item in columns" :key="item.key">

                <el-dropdown-item>

                  <el-checkbox :checked="item.visible" @change="checkboxChange($event, item.label)" :label="item.label" />

                </el-dropdown-item>

              </template>

            </el-dropdown-menu>

          </template>

        </el-dropdown>

      </el-tooltip>

    </el-row>

    <el-dialog :title="title" v-model="open" append-to-body>

@@ -24,12 +36,29 @@


<script setup>

const props = defineProps({

  /* 是否显示检索条件 */

  showSearch: {

    type: Boolean,

    default: true,

  },

  /* 显隐列信息 */

  columns: {

    type: Array,

  },

  /* 是否显示检索图标 */

  search: {

    type: Boolean,

    default: true,

  },

  /* 显隐列类型（transfer穿梭框、checkbox复选框） */

  showColumnsType: {

    type: String,

    default: "checkbox",

  },

  /* 右外边距 */

  gutter: {

    type: Number,

    default: 10,

  },

})



@@ -41,6 +70,14 @@
const title = ref("显示/隐藏");

// 是否显示弹出层

const open = ref(false);



const style = computed(() => {

  const ret = {};

  if (props.gutter) {

    ret.marginRight = `${props.gutter / 2}px`;

  }

  return ret;

});



// 搜索

function toggleSearch() {

@@ -65,12 +102,20 @@
  open.value = true;

}



// 显隐列初始默认隐藏列

for (let item in props.columns) {

  if (props.columns[item].visible === false) {

    value.value.push(parseInt(item));

if (props.showColumnsType == 'transfer') {

  // 显隐列初始默认隐藏列

  for (let item in props.columns) {

    if (props.columns[item].visible === false) {

      value.value.push(parseInt(item));

    }

  }

}



// 勾选

function checkboxChange(event, label) {

  props.columns.filter(item => item.label == label)[0].visible = event;

}



</script>



<style lang='scss' scoped>

@@ -82,8 +127,8 @@
:deep(.el-transfer__button:first-child) {

  margin-bottom: 10px;

}



.my-el-transfer {

  text-align: center;

:deep(.el-dropdown-menu__item) {

  line-height: 30px;

  padding: 0 17px;

}

</style>
</style>