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實現一個非固定行列表格，你們學到知識或技能了嗎？如果還想學到更多技能或者豐富自己的知識儲備，歡迎關注億速云行業資訊頻道。