平时我们会使用若依字典样式，有时候需要隐藏。

      <el-table-column label="统计指标" align="center" prop="type" width="200px"><template slot-scope="scope"><dict-tag :options="dict.type.statistical_index" :value="scope.row.type" :hideStyle="true"/></template></el-table-column>

<template><div><template v-for="(item, index) in options"><template v-if="values.includes(item.value)"><spanv-if="getHideStyle(item)":key="item.value":index="index":class="item.raw.cssClass">{{ item.label + ' ' }}</span><el-tagv-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>javascript">
export default {name: "DictTag",props: {options: {type: Array,default: null,},value: [Number, String, Array],// 当未找到匹配的数据时，显示valueshowValue: {type: Boolean,default: true,},separator: {type: String,default: ","},hideStyle:{type: Boolean,default: false,}},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;})},},methods: {// 封装判断逻辑的方法getHideStyle(item) {if (this.hideStyle) {return this.hideStyle} else {return ((item.raw.listClass === 'default' || item.raw.listClass === '') &&(item.raw.cssClass === '' || item.raw.cssClass === null));}}}
};
</script>
<style scoped>
.el-tag + .el-tag {margin-left: 10px;
}
</style>