Jeecgboot中dict禁用部分字典内容

最新推荐文章于 2025-12-01 00:28:16 发布

原创最新推荐文章于 2025-12-01 00:28:16 发布 · 804 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #typescript #html #vue.js #es6 #anti-design-vue #javascript

Vue3 同时被 3 个专栏收录

4 篇文章

订阅专栏

前端

4 篇文章

订阅专栏

Jeecgboot

3 篇文章

订阅专栏

文章描述了如何在JDictSelectTag.vue文件中，使用antDesign组件的select下拉框，根据disable和enable数组动态判断值的禁用状态，并提供了计算函数和示例代码。作者也提到了输入参数的要求和注意事项。

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

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

<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" :disabled="DisableChecksums(item.value, disable, enable)">
          <span style="display: inline-block; width: 100%" :title="item.label">
            {{ item.label }}
          </span>
        </a-select-option>
      </template>
    </a-select>

接收属性传入值

props: {
    disable: propTypes.array.def([]), // 禁用数组
    enable: propTypes.array.def([]), // 启用数组
  },

计算函数

/**
        * 根据给定的值判断是否禁用校验和
        * @param value 需要判断的值
        * @param disable 禁用列表，数组形式
        * @param enable 启用列表，数组形式
        * @returns {boolean} 返回一个布尔值，指示是否禁用校验和
        */
    function DisableChecksums(value, disable, enable) {
      // 判断值是否在启用列表中
      const isEnabled = enable.includes("" + value)
      // 判断值是否在禁用列表中
      const isDisabled = disable.includes("" + value)

      // 如果禁用列表为空但启用列表不为空，则返回启用判断的反义
      if (!disable.length && enable.length) {
        return !isEnabled
        // 如果启用列表为空但禁用列表不为空，则返回禁用判断的结果
      } else if (!enable.length && disable.length) {
        return isDisabled
      } else {
        // 如果值同时在启用和禁用列表中，打印错误并返回true
        if (isDisabled && isEnabled) {
          console.error('请检查字典配置是否正确,disable和enable不能重复');
          return true;
        } else if (isDisabled && !isEnabled) {
          // 值在禁用列表中且不在启用列表中，返回true
          return true;
        } else if (!isDisabled && isEnabled) {
          // 值在启用列表中且不在禁用列表中，返回false
          return false;
        } else if (!isDisabled && !isEnabled) {
          // 值既不在启用列表中也不在禁用列表中，返回false
          return false
        } else {
          // 如果执行到这里，表示逻辑有错误，打印错误信息
          console.error("逻辑错误,请前往查看");
        }
      }
    }

注意：传入值一定要是字符串数组【disable（禁用数组）和enable（启用数组）数组值不要重复】，可以只写一个

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

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