先看看ElementUI里關(guān)于el-table的template數(shù)據(jù)結(jié)構(gòu)：
<template>
<el-table
:data="tableData"
style="width: 100%">
<el-table-column
prop="date"
label="日期"
width="180">
</el-table-column>
<el-table-column
prop="name"
label="姓名"
width="180">
</el-table-column>
<el-table-column
prop="address"
label="地址">
</el-table-column>
</el-table>
</template>
再看看ElementUI里關(guān)于el-table的data數(shù)據(jù)結(jié)構(gòu)：
<script>
export default {
data() {
return {
tableData: [{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀區(qū)金沙江路 1518 弄'
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀區(qū)金沙江路 1517 弄'
}, {
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀區(qū)金沙江路 1519 弄'
}, {
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀區(qū)金沙江路 1516 弄'
}]
}
}
}
</script>
那么問題來了闪萄，如果有很多prop怎么辦咆耿？比如幾百個凳厢？那就要用到循環(huán)結(jié)構(gòu)了，獲取到data數(shù)據(jù)之后展东，template的代碼可以這樣改：
1522374707(1).png
請忽略上圖代碼中的其他參數(shù)，看v-for指令，里面的positionList對應(yīng)的是el-table 里 :data="tableData"莱坎，把它的任意數(shù)組里對象的key取出來就好了
細(xì)心的小伙伴已經(jīng)發(fā)現(xiàn)了，我還用了動態(tài)的width寸士，為了解決不同字?jǐn)?shù)長度的表頭折行顯示的問題檐什，這里的數(shù)據(jù)存在了positionKey的對象里，專門用來匹配到途中代碼通過v-for循環(huán)對應(yīng)的index（key）一致弱卡，從而獲取到對應(yīng)的width厢汹，為了方便使用，positionKey的數(shù)據(jù)結(jié)構(gòu)是這樣的：
export const positionKey= {
key1: {
title: '表頭對應(yīng)的文字1',
width: 100
},
key2: {
title: '表頭對應(yīng)的文字2',
width: 120
},
key3: {
title: '表頭對應(yīng)的文字3',
width: 110
},
}
這種數(shù)據(jù)結(jié)構(gòu)也為后期的自定義拖拽配置動態(tài)列做了預(yù)備~
如果還有其它疑問請留言谐宙，謝謝支持~
