Jeecgboot中dict限制显示部分内容

最新推荐文章于 2025-10-21 11:22:12 发布

原创最新推荐文章于 2025-10-21 11:22:12 发布 · 606 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #visual studio code #typescript #es6 #anti-design-vue #vue.js

Vue3 同时被 3 个专栏收录

4 篇文章

订阅专栏

前端

4 篇文章

订阅专栏

Jeecgboot

3 篇文章

订阅专栏

本文介绍了如何在JDictSelectTag.vue文件中使用antDesign组件，并添加v-if判断和计算函数来根据传入的显示和隐藏数组动态控制下拉选项的可见性。作者还提供了组件的props和计算函数实现的示例。

需要修改的文件：src\components\Form\src\jeecg\components\JDictSelectTag.vue

找到对应的ant Design组件位置添加v-if判断并执行计算函数

<a-select v-else :placeholder="placeholder" v-bind="attrs" v-model:value="state" :filterOption="handleFilterOption"
      :getPopupContainer="getPopupContainer" :style="style" @change="handleChange">
      <a-select-option v-if="showChooseOption" :value="null">请选择…</a-select-option>
      <template v-for="item in dictOptions" :key="`${item.value}`">
        <a-select-option :value="item.value" v-if="HideChecks(item.value, display, hide)">
          <span style="display: inline-block; width: 100%" :title="item.label">
            {{ item.label }}
          </span>
        </a-select-option>
      </template>
    </a-select>

接收属性传入值

props: {
    display: propTypes.array.def([]), // 显示数组
    hide: propTypes.array.def([]), // 隐藏数组
  },

计算函数

/**
     * 根据给定的值判断是否隐藏检查项
     * @param value 需要判断的值
     * @param display 显示数组，包含应显示的值
     * @param hide 隐藏数组，包含应隐藏的值
     * @return {Boolean} 返回判断结果，决定是否隐藏
     */
    function HideChecks(value, display, hide) {
      // 判断value是否在隐藏数组hide中
      const ishide = hide.includes("" + value)
      // 判断value是否在显示数组display中
      const isdisplay = display.includes("" + value)

      // 当display为空但hide不为空时的处理逻辑
      if (!display.length && hide.length) {
        return !ishide
      } else if (!hide.length && display.length) { // 当hide为空但display不为空时的处理逻辑
        return isdisplay
      } else {
        // 当display和hide都非空时的处理逻辑
        if (ishide && isdisplay) {
          console.error('请检查字典配置是否正确,display和hide不能重复');
          return false;
        } else if (ishide && !isdisplay) { // value在hide中但不在display中
          return false;
        } else if (!ishide && isdisplay) { // value在display中但不在hide中
          return true;
        } else if (!ishide && !isdisplay) { // value既不在display中也不在hide中
          return true
        } else {
          console.error("逻辑错误,请前往查看");
        }
      }
    }

注意：传入值一定要是字符串数组【display（显示数组）和hide（隐藏数组）数组值不要重复】

 <JDictSelectTag v-model:value="orderMainModel.workStartType" :display='["1", "9"]':hide="['yes', '大于', '4', '5']" :showChooseOption="false" placeholder="请选择打卡状态" dictCode="attendance" />

个人的小小优化，不完美之处还望同僚们指正