ElementUI中el-table多列属性名称未知

最新推荐文章于 2025-09-16 17:00:55 发布

原创最新推荐文章于 2025-09-16 17:00:55 发布 · 1.2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#elementui #vue.js #javascript

Vue 专栏收录该内容

5 篇文章

订阅专栏

本文介绍如何在ElementUI中使用el-table时，针对未知对象属性动态创建表格列。通过整理属性列表，然后根据该列表调整数据格式，确保只显示指定的属性。

1 功能简述

使用ElementUI中的el-table时可能会存在不知道对象属性名称，渲染el-table时只能根据不同的对象属性动态渲染。解决方法：先根据数据将未知属性整理成属性列表，再依据属性列表将数据修改为对象。

例如：

# 属性列表
attrArr= [
    { enTitle:'attr_0', chTitle:'属性_0', isShow:false },
    { enTitle:'attr_1', chTitle:'属性_1', isShow:true },
    { enTitle:'attr_2', chTitle:'属性_3', isShow:true }
]
# 数据列表
attrArr= [
    { 'attr_0': '属性_0_0', 'attr_1': '属性_0_1', 'attr_2': '属性_0_2' },
    { 'attr_0': '属性_1_0', 'attr_1': '属性_1_1', 'attr_2': '属性_1_2' }
]

2 截图

3 源代码

<template>
  <div class="combine_cell">
    <div class="cc_con">
      <el-table
        v-bind:data="dataArr">
        <el-table-column
          v-for="(attr, index) in newAttrArr"
          v-bind:key="index"
          v-bind:prop="attr.enTitle"
          v-bind:label="attr.chTitle">
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>

export default {
  name: 'CombineMultiAttr',
  data(){
    return{
      dataArr: new Array(),
      attrArr: new Array()
    }
  },

  created(){
    let attrLen = 4;
    for(let i=0; i<attrLen; i++){
      this.attrArr.push({
        enTitle:'attr_'+i,
        chTitle:'属性_'+i,
        isShow:true
      });
      
      // 不显示第一列
      if(i==0){
        this.attrArr[i].isShow = false;
      }
    }

    for(let i=0; i<4; i++){
      let item = new Object();
      for(let j=0; j<attrLen; j++){
        item[this.attrArr[j].enTitle]=(this.attrArr[j].chTitle)+'_'+i;
      }
      this.dataArr.push(item);
    }
  },

  computed:{
    newAttrArr: function(){
      return this.attrArr.filter(item=>{
        return item.isShow;
      })
    }
  },

  methods:{

  }

}
</script>

<style scoped>

</style>