vue中怎么利用element实现一个非固定行列表格-创新互联

本篇文章为大家展示了vue中怎么利用element实现一个非固定行列表格，内容简明扼要并且容易理解，绝对能使你眼前一亮，通过这篇文章的详细介绍希望你能有所收获。

创新互联公司是网站建设专家,致力于互联网品牌建设与网络营销，专业领域包括成都网站设计、网站建设、电商网站制作开发、小程序开发、微信营销、系统平台开发，与其他网站设计及系统开发公司不同，我们的整合解决方案结合了恒基网络品牌建设经验和互联网整合营销的理念，并将策略和执行紧密结合，且不断评估并优化我们的方案，为客户提供全方位的互联网品牌整合方案！

vue+element实现非固定行列表格

标题这么长说的什么意思呢，就是平时的表格都是一维的，变量只有行，列也就是属性prop是固定的，当需要行列都不固定的情况，就像乘法表，行列分别是i,j中间内容是i*j

实现：

Html

var Main = {      data() {        return {          tableData: [{            date: '2016-05-02',            id:1,            name: '王小虎',            address: '上海市普陀区金沙江路 1518 弄',                      }, {                      date: '2016-05-04',            id:2,            name: '王1虎',            address: '上海市普陀区金沙江路 1517 弄',                      }, {                      date: '2016-05-01',            name: '王2虎',            id:3,            address: '上海市普陀区金沙江路 1519 弄',                      }, {                     date: '2016-05-03',            name: '王3虎',            id:4,            address: '上海市普陀区金沙江路 1516 弄',                      },{                    date: '2016-05-03',            id:5,            name: '王4虎',            address: '上海市普陀区金沙江路 1516 弄',                      }],              }      },          }var Ctor = Vue.extend(Main)new Ctor().$mount('#app')

Css

@import url("//unpkg.com/element-ui@2.4.11/lib/theme-chalk/index.css");

总结

  可以发现，数据层面还是照平常api来给，一维层面的数据，只是不知道key值有多少个，通过改变html的结构来渲染数据。

  虽然不知道有多少个key，但一旦给了数据，每个字典里key的数量是相同的

  所以，v-for="(item,key) in tableData[0]"取第一个字典的结构来遍历key，有多少个key，就有多少列。

  :label="key" :prop="key"遍历了以后，:label="key"取的就是key对应的值，:prop="key"属性为key

上述内容就是vue中怎么利用element实现一个非固定行列表格，你们学到知识或技能了吗？如果还想学到更多技能或者丰富自己的知识储备，欢迎关注创新互联行业资讯频道。

文章名称：vue中怎么利用element实现一个非固定行列表格-创新互联
链接地址：http://bjjierui.cn/article/djihod.html