本篇文章為大家展示了vue中怎么利用element實(shí)現(xiàn)一個(gè)非固定行列表格，內(nèi)容簡(jiǎn)明扼要并且容易理解，絕對(duì)能使你眼前一亮，通過(guò)這篇文章的詳細(xì)介紹希望你能有所收獲。

創(chuàng)新互聯(lián)公司是網(wǎng)站建設(shè)專家,致力于互聯(lián)網(wǎng)品牌建設(shè)與網(wǎng)絡(luò)營(yíng)銷，專業(yè)領(lǐng)域包括成都網(wǎng)站設(shè)計(jì)、網(wǎng)站建設(shè)、電商網(wǎng)站制作開(kāi)發(fā)、小程序開(kāi)發(fā)、微信營(yíng)銷、系統(tǒng)平臺(tái)開(kāi)發(fā)，與其他網(wǎng)站設(shè)計(jì)及系統(tǒng)開(kāi)發(fā)公司不同，我們的整合解決方案結(jié)合了恒基網(wǎng)絡(luò)品牌建設(shè)經(jīng)驗(yàn)和互聯(lián)網(wǎng)整合營(yíng)銷的理念，并將策略和執(zhí)行緊密結(jié)合，且不斷評(píng)估并優(yōu)化我們的方案，為客戶提供全方位的互聯(lián)網(wǎng)品牌整合方案！

vue+element實(shí)現(xiàn)非固定行列表格

標(biāo)題這么長(zhǎng)說(shuō)的什么意思呢，就是平時(shí)的表格都是一維的，變量只有行，列也就是屬性prop是固定的，當(dāng)需要行列都不固定的情況，就像乘法表，行列分別是i,j中間內(nèi)容是i*j

實(shí)現(xiàn)：

Html

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

Css

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

總結(jié)

??可以發(fā)現(xiàn)，數(shù)據(jù)層面還是照平常api來(lái)給，一維層面的數(shù)據(jù)，只是不知道key值有多少個(gè)，通過(guò)改變html的結(jié)構(gòu)來(lái)渲染數(shù)據(jù)。

??雖然不知道有多少個(gè)key，但一旦給了數(shù)據(jù)，每個(gè)字典里key的數(shù)量是相同的

??所以，v-for="(item,key) in tableData[0]"取第一個(gè)字典的結(jié)構(gòu)來(lái)遍歷key，有多少個(gè)key，就有多少列。

??:label="key" :prop="key"遍歷了以后，:label="key"取的就是key對(duì)應(yīng)的值，:prop="key"屬性為key

上述內(nèi)容就是vue中怎么利用element實(shí)現(xiàn)一個(gè)非固定行列表格，你們學(xué)到知識(shí)或技能了嗎？如果還想學(xué)到更多技能或者豐富自己的知識(shí)儲(chǔ)備，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

當(dāng)前名稱：vue中怎么利用element實(shí)現(xiàn)一個(gè)非固定行列表格-創(chuàng)新互聯(lián)
本文地址：http://weahome.cn/article/djihod.html