Vue.js에서 v-for와 v-if는 계산 속성으로 대체합니다

최근에 요소 UI에 있는 테이블 테이블을 사용했지만, 열을 순환할 때 조건에 따라 열을 렌더링하고, 값이 없으면 렌더링하지 않기 때문에 v-if와 v-for를 사용했습니다
직접적인 사례 수요는 테이블데이터가 있는데 하나의 대상 수조로 키6, 키7, 키8... 키26의 값을 포함하지만 어떤 값은null이고 목록의 어떤 항목은 모두 값이 없다. 전시할 때 키6의 이름은 키Ind에 대응하는 중국어이다.

<el-table-column :prop="'key'+(index+6)" :label="item"  v-for="(item,index) in activeKeyInd" :key="index">
  <template slot-scope="scope">{
     {
     getKeyVal(scope.row,item)}}</template>
</el-table-column>

// data:
keyInd: ["    ","    ","    ","  ","    ","    ","    ","   ","   ","    1","    2",
"     ","    ","    ","    ","    ","    ","   ","    ","    1","    2","    3"]

computed:{
     
 activeKeyInd(){
     
  let activeKey = this.keyInd.slice();
  return activeKey.filter( (keyItem,keyIndex)=> {
      //     key 
    return this.tableData.find((item)=>{
      //  tableData    key       
      return item['key'+(keyIndex+6)];
    })
  })
 }
}

getKeyVal(row,item){
     
//    ，     index  ，        ，index    ， keyInd index  ，        index，   key  
  let index = this.keyInd.findIndex((val)=>{
     
    return val == item;
  })
  let keyName = "key"+(index+6);
  return this.$validate.formatCurrency(row[keyName])
},