From 3c4fee1db116c11d4f04727cfe076d7c94daeaf2 Mon Sep 17 00:00:00 2001 From: yanzhaofeige <yanzhaofeige@qq.com> Date: Mon, 30 Sep 2024 12:10:57 +0800 Subject: [PATCH] init --- cpzidc-ui/src/components/DictTag/index.vue | 89 ++++++++++++++++++++++++++++++++++++++++++++ 1 files changed, 89 insertions(+), 0 deletions(-) diff --git a/cpzidc-ui/src/components/DictTag/index.vue b/cpzidc-ui/src/components/DictTag/index.vue new file mode 100644 index 0000000..6b5b230 --- /dev/null +++ b/cpzidc-ui/src/components/DictTag/index.vue @@ -0,0 +1,89 @@ +<template> + <div> + <template v-for="(item, index) in options"> + <template v-if="values.includes(item.value)"> + <span + v-if="(item.raw.listClass == 'default' || item.raw.listClass == '') && (item.raw.cssClass == '' || item.raw.cssClass == null)" + :key="item.value" + :index="index" + :class="item.raw.cssClass" + >{{ item.label + ' ' }}</span + > + <el-tag + v-else + :disable-transitions="true" + :key="item.value" + :index="index" + :type="item.raw.listClass == 'primary' ? '' : item.raw.listClass" + :class="item.raw.cssClass" + > + {{ item.label + ' ' }} + </el-tag> + </template> + </template> + <template v-if="unmatch && showValue"> + {{ unmatchArray | handleArray }} + </template> + </div> +</template> + +<script> +export default { + name: "DictTag", + props: { + options: { + type: Array, + default: null, + }, + value: [Number, String, Array], + // 当未找到匹配的数据时,显示value + showValue: { + type: Boolean, + default: true, + }, + separator: { + type: String, + default: "," + } + }, + data() { + return { + unmatchArray: [], // 记录未匹配的项 + } + }, + computed: { + values() { + if (this.value === null || typeof this.value === 'undefined' || this.value === '') return [] + return Array.isArray(this.value) ? this.value.map(item => '' + item) : String(this.value).split(this.separator) + }, + unmatch() { + this.unmatchArray = [] + // 没有value不显示 + if (this.value === null || typeof this.value === 'undefined' || this.value === '' || this.options.length === 0) return false + // 传入值为数组 + let unmatch = false // 添加一个标志来判断是否有未匹配项 + this.values.forEach(item => { + if (!this.options.some(v => v.value === item)) { + this.unmatchArray.push(item) + unmatch = true // 如果有未匹配项,将标志设置为true + } + }) + return unmatch // 返回标志的值 + }, + + }, + filters: { + handleArray(array) { + if (array.length === 0) return ''; + return array.reduce((pre, cur) => { + return pre + ' ' + cur; + }) + }, + } +}; +</script> +<style scoped> +.el-tag + .el-tag { + margin-left: 10px; +} +</style> -- Gitblit v1.9.3