作者 刘鹏飞

修改DictTag组件,当value没有匹配的值时,展示value

@@ -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,10 +17,13 @@ @@ -17,10 +17,13 @@
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>
  24 + <template v-if="unmatch && showValue">
  25 + {{ unmatchArray | handleArray }}
  26 + </template>
24 </div> 27 </div>
25 </template> 28 </template>
26 29
@@ -33,6 +36,16 @@ export default { @@ -33,6 +36,16 @@ export default {
33 default: null, 36 default: null,
34 }, 37 },
35 value: [Number, String, Array], 38 value: [Number, String, Array],
  39 + // 当未找到匹配的数据时,显示value
  40 + showValue: {
  41 + type: Boolean,
  42 + default: true,
  43 + }
  44 + },
  45 + data() {
  46 + return {
  47 + unmatchArray: [], // 记录未匹配的项
  48 + }
36 }, 49 },
37 computed: { 50 computed: {
38 values() { 51 values() {
@@ -42,11 +55,38 @@ export default { @@ -42,11 +55,38 @@ export default {
42 return []; 55 return [];
43 } 56 }
44 }, 57 },
  58 + 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 )) this.unmatchArray.push(item)
  70 + });
  71 + return true;
  72 + }
  73 + // 没有value不显示
  74 + return false;
  75 + },
  76 +
45 }, 77 },
  78 + filters: {
  79 + handleArray(array) {
  80 + if(array.length===0) return '';
  81 + return array.reduce((pre, cur) => {
  82 + return pre + ' ' + cur;
  83 + })
  84 + },
  85 + }
46 }; 86 };
47 </script> 87 </script>
48 <style scoped> 88 <style scoped>
49 .el-tag + .el-tag { 89 .el-tag + .el-tag {
50 margin-left: 10px; 90 margin-left: 10px;
51 } 91 }
52 -</style>  
  92 +</style>