vue+element实现动态表格(动态生成表头)

25 篇文章 2 订阅

场景:选中左侧的船舶,点击确定后,右侧动态生成表头
在这里插入图片描述
这个表头可以是后端给的数据,当然也可以是前端点击后自己配置数据。我用的是前端自己存储表头数据。部分代码如下:

   <el-table-column
     v-for="item in tableColumnList" 
     :label="item.propName"
     :property="item.prop"
     :key="item.prop"
     align="center">
     <template slot-scope="scope">
       <span>{{ scope.row[scope.column.property] === 'NaN' ? '-' : Number(scope.row[scope.column.property]).toFixed(2) + 'km' }}</span>
     </template>
   </el-table-column>
  tableColumnList: [] // 初始化动态的表头数组
	 // 配置表头
      let selHeader = this.$refs.tree.getCheckedNodes();
      let tableHeader = []; // 组合动态的表头
      selHeader.forEach(item => {
        let tabHeader = {};
        tabHeader.prop = item.code;
        tabHeader.propName = item.name;
        tableHeader.push(tabHeader);
      });
      this.tableColumnList = tableHeader;

注意:tableColumnList就是实现动态的关键因素!
prop跟表中的字段是一一对应的,propName就是每个字段的中文名,也即在表头显示的名字。

动态表格与element一般表格在使用方法上的两个区别:

1、label与property的赋值方式
动态表格,表格的label和property是动态根据后台返回的数据(或者从js获取)来取值的,后台返回的数据就是上面的tableColumnList。

通过 :label=“item.propName” 取得tableColumnList中的propName,也就是表头每一列的名字;
通过 :property=“item.prop” 取得tableColumnList中对象的prop,也就是后台实体类中的属性名,
2、属性和数据双向绑定方式,也就是 scope.row.

通过 scope.row[scope.column.property] 来获取每一个属性对应的数据,
scope.column.property 中的property取的就是 :property=“item.prop” 中的值;

参考文章:https://blog.csdn.net/weixin_43714266/article/details/90644450

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值