作者 RuoYi

优化字典标签支持自定义分隔符

@@ -7,7 +7,7 @@ @@ -7,7 +7,7 @@
7 :key="item.value" 7 :key="item.value"
8 :index="index" 8 :index="index"
9 :class="item.raw.cssClass" 9 :class="item.raw.cssClass"
10 - >{{ item.label + " " }}</span 10 + >{{ item.label + ' ' }}</span
11 > 11 >
12 <el-tag 12 <el-tag
13 v-else 13 v-else
@@ -17,7 +17,7 @@ @@ -17,7 +17,7 @@
17 :type="item.raw.listClass == 'primary' ? '' : item.raw.listClass" 17 :type="item.raw.listClass == 'primary' ? '' : item.raw.listClass"
18 :class="item.raw.cssClass" 18 :class="item.raw.cssClass"
19 > 19 >
20 - {{ item.label + " " }} 20 + {{ item.label + ' ' }}
21 </el-tag> 21 </el-tag>
22 </template> 22 </template>
23 </template> 23 </template>
@@ -40,6 +40,10 @@ export default { @@ -40,6 +40,10 @@ export default {
40 showValue: { 40 showValue: {
41 type: Boolean, 41 type: Boolean,
42 default: true, 42 default: true,
  43 + },
  44 + separator: {
  45 + type: String,
  46 + default: ","
43 } 47 }
44 }, 48 },
45 data() { 49 data() {
@@ -49,39 +53,32 @@ export default { @@ -49,39 +53,32 @@ export default {
49 }, 53 },
50 computed: { 54 computed: {
51 values() { 55 values() {
52 - if (this.value !== null && typeof this.value !== "undefined") {  
53 - return Array.isArray(this.value) ? this.value : [String(this.value)];  
54 - } else {  
55 - return [];  
56 - } 56 + if (this.value === null || typeof this.value === 'undefined' || this.value === '') return []
  57 + return Array.isArray(this.value) ? this.value.map(item => '' + item) : String(this.value).split(this.separator)
57 }, 58 },
58 unmatch() { 59 unmatch() {
59 - this.unmatchArray = [];  
60 - if (this.value !== null && typeof this.value !== "undefined") {  
61 - // 传入值为非数组  
62 - if (!Array.isArray(this.value)) {  
63 - if (this.options.some((v) => v.value == this.value)) return false;  
64 - this.unmatchArray.push(this.value);  
65 - return true;  
66 - }  
67 - // 传入值为Array  
68 - this.value.forEach((item) => {  
69 - if (!this.options.some((v) => v.value == item))  
70 - this.unmatchArray.push(item);  
71 - });  
72 - return true;  
73 - } 60 + this.unmatchArray = []
74 // 没有value不显示 61 // 没有value不显示
75 - return false; 62 + if (this.value === null || typeof this.value === 'undefined' || this.value === '' || this.options.length === 0) return false
  63 + // 传入值为数组
  64 + let unmatch = false // 添加一个标志来判断是否有未匹配项
  65 + this.values.forEach(item => {
  66 + if (!this.options.some(v => v.value === item)) {
  67 + this.unmatchArray.push(item)
  68 + unmatch = true // 如果有未匹配项,将标志设置为true
  69 + }
  70 + })
  71 + return unmatch // 返回标志的值
76 }, 72 },
  73 +
77 }, 74 },
78 filters: { 75 filters: {
79 handleArray(array) { 76 handleArray(array) {
80 - if (array.length === 0) return ""; 77 + if (array.length === 0) return '';
81 return array.reduce((pre, cur) => { 78 return array.reduce((pre, cur) => {
82 - return pre + " " + cur; 79 + return pre + ' ' + cur;
83 }) 80 })
84 - } 81 + },
85 } 82 }
86 }; 83 };
87 </script> 84 </script>