<template>

<div class="status-show-table">
    <div class="header">
        {{tableTitle}}
    </div>
    <div class="content">
        <div class="row-item" v-for="item in headerList" :key="item.idx">
            <div class="key-name">
                {{item.i18n}}
            </div>  
            <!-- 判断需要转化的位 v-if="item.digits==8"-->
            <div class="propty-value" v-if="item.binary">
                <template  v-for="digit in **decimalToBinary(listDataObj[item.key],item)**">
                    <span  
                            :key="digit.idx"  
                            :title="digit.title.value"
                            :style="{'color':digit.title.color}" 
                    >
                      {{digit.value}}
                    </span>
                </template>
            </div>  
            <div class="propty-value" v-if="!item.binary">
                <span v-if="!item.titleI18n"
                      :key= item.idx
                   >
                   {{listDataObj[item.key]}}
                </span>
                <span  v-if ="item.titleI18n"
                      :key = item.idx
                      :title="listDataObj[item.key] | backTitle(item)"
                   >
                   {{listDataObj[item.key] | backTitle(item)}}
                </span> 
            </div>
        </div>    
    </div>
    <div class="footer">
            <el-badge v-if="**notifyFlag**" class="errorTips" :title="$t('statusMonitor.sysErrors')">
                    <i class="el-icon-warning"></i>
            </el-badge>
    </div>
</div>

</template>
<script>

export default {

name: 'status-show-table',
props: {
    tableTitle:{               //表格标题
        type:String,
        default:''
    },
    listDataStr:{              //列表数据字符串
        type:String,
        default:''
    },
    headerList:{               //头信息列表
        type:Array,
        default:()=>{
            return []
        }
    }
},
watch:{

　　 listDataStr: {

　　　　handler ( newV, oldV ) {
           this.listDataObj = JSON.parse(newV)
　　　　}

　　 }

},
data () {
    return {
        listDataObj:{},        //列表数据对象 
        notifyFlag:false       //提示显示标志
    }
},
created() {

},
mounted() {

},
methods:{
    decimalToBinary(deNum,item){         //十进制转二进制
        if (!deNum){
            if(deNum!=0){
               return '' 
            }
        }
        let binaryStr=""
        let remainder=0
        let binaryArr=[]
        let binaryObjArr=[]
            do{
                remainder=deNum%2
                deNum=Math.floor(deNum/2) 
                binaryStr=remainder+binaryStr
            }while(deNum!=1 && deNum!=0) 
                if(binaryStr.length<item.digits){
                    let bsLen=item.digits-binaryStr.length
                    for(let i=0;i<bsLen;i++){
                    binaryStr="0"+binaryStr
                    }   
                } 
                binaryArr=binaryStr.split('') 
                for( let i=0;i<binaryArr.length;i++ ){
                    binaryObjArr.push({idx:i,value:binaryArr[i],title:item.titleI18n[i][binaryArr[i]]})
                    this.notifyFlag=true
                }
                return  binaryObjArr 
    },
},
filters: {
    backTitle: function (value,item) {
        if (!value){
            if(value!=0){
               return '' 
            }
        }
        for(let key in item.titleI18n){
            if(key==value){
              return  item.titleI18n[key]
            }
        }
        return ''
    }
}

}
</script>

<style lang="scss" scoped>
.status-show-table{

width: 50%;
background: white;
float: left;
.header{
    padding: 20px 0;
    font-size: 24px;
    font-weight: 600;
    width: 80%;
    text-align: left;
    margin: 0 auto;
}
.content{
    width: 80%;
    margin: 0 auto;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
    .row-item{
        padding: 10px 0;
        border-bottom: 1px solid #eee;
        .key-name{
            width: 30%;
            display: inline-block;
            font-size: 18px;
            text-align: right;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }
        .propty-value{
            width: 70%;
            display: inline-block;
            span{
                padding: 5px 12px;
                font-size: 22px;
                cursor: pointer;
            }
        }
    }
}

}
</style>

代码如上decimalToBinary方法中对传入参数进行2进制转变,其中会有判断，更改notifyFlag的值,这里会导致组件的重复渲染。我用$emit将数据发到父组件,在父组件中显示提示，只要改变data中的数据，也会导致重复渲染。