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

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

实现：

Html

<script src="//unpkg.com/vue/dist/vue.js"></script><script src="//unpkg.com/element-ui@2.4.11/lib/index.js"></script><p id="app"><template> <el-table :data="tableData" style="width: 100%"> <p v-for="(item,key) in tableData[0]" :key="item.id"> <el-table-column :label="key" :prop="key" width="180"> </el-table-column> </p> </el-table> </template></p>

Script

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实现非固定行列表格的全部内容，学步园全面介绍编程技术、操作系统、数据库、web前端技术等内容。