el-table for遍历生成,width 空代表自适应

1先写点前言吧
这个算是千年老代码,我都是参考这个代码来写自己的结构,要注意这个算是vue的数据驱动吧,因为它是按照数据来渲染你的结构的。

之前写react和原生的东西就比较爱用js来操作东西,结构被vue大佬鄙视,写VUE的时候就尽量不去操作dom。不过这样整的我都忘记写react了,尴尬。
这点其实我在搞react的时候就知道一个概念,就是react是一个写js的东西,他不会给我们封装一些方法,基本就是原生的js来操作页面,而vue就比较现成,很多东西都是有vue自己封装的。比如v-for v-if v-show之类的,用他们结合数组或者json来控制渲染你的组件,所以这个算是数据驱动吧。前者比较灵活,你自己爱咋地咋地;后者就被限制住了,后者写东西都是尽量往vue自己的东西上面靠,不会去写原生的东西。思路差别。
el-table这里我推荐一个不错的博客,我的项目里用的比较简单,不需要放按钮。他这里面有template的结构,方便放按钮图标之类的东西,连接如下https://www.cnblogs.com/layaling/p/10962858.html
2实际代码
当el-table元素中注入data对象数组后,在el-table-column中用prop属性来对应对象中的键名即可填入数据,用label属性来定义表格的列名。可以使用width属性来定义列宽。

相当于是要枚举出所有需要展示的参数,这种情况在参数比较少的情况下是比较方便的,但是在有很多数据或者参数不确定的情况下,这种枚举的方式就不太适合了。
3代码
这里我补充解释一些代码思路,数据部分是两组,一组用

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值