DictTag组件，当value没有匹配的值时，展示value

RuoYi

2023-04-23 8552850e2c8e5845ccac0bb3d5e4f6689969ce29

DictTag组件，当value没有匹配的值时，展示value

 src/components/DictTag/index.vue

@@ -7,7 +7,8 @@
          :key="item.value"

          :index="index"

          :class="item.elTagClass"

        >{{ item.label }}</span>

          >{{ item.label + " " }}</span

        >

        <el-tag

          v-else

          :disable-transitions="true"

@@ -15,13 +16,20 @@
          :index="index"

          :type="item.elTagType === 'primary' ? '' : item.elTagType"

          :class="item.elTagClass"

        >{{ item.label }}</el-tag>

          >{{ item.label + " " }}</el-tag

        >

      </template>

    </template>

    <template v-if="unmatch && showValue">

      {{ unmatchArray | handleArray }}

    </template>

  </div>

</template>



<script setup>

// // 记录未匹配的项

const unmatchArray = ref([]);



const props = defineProps({

  // 数据

  options: {

@@ -30,16 +38,47 @@
  },

  // 当前的值

  value: [Number, String, Array],

})

  // 当未找到匹配的数据时，显示value

  showValue: {

    type: Boolean,

    default: true,

  },

});



const values = computed(() => {

  if (props.value !== null && typeof props.value !== 'undefined') {

  if (props.value !== null && typeof props.value !== "undefined") {

    return Array.isArray(props.value) ? props.value : [String(props.value)];

  } else {

    return [];

  }

})

});



const unmatch = computed(() => {

  unmatchArray.value = [];

  if (props.value !== null && typeof props.value !== "undefined") {

    // 传入值为非数组

    if (!Array.isArray(props.value)) {

      if (props.options.some((v) => v.value == props.value)) return false;

      unmatchArray.value.push(props.value);

      return true;

    }

    // 传入值为Array

    props.value.forEach((item) => {

      if (!props.options.some((v) => v.value == item))

        unmatchArray.value.push(item);

    });

    return true;

  }

  // 没有value不显示

  return false;

});



function handleArray(array) {

  if (array.length === 0) return "";

  return array.reduce((pre, cur) => {

    return pre + " " + cur;

  });

}

</script>



<style scoped>