動態(tài)表格
話不多說奈搜，上代碼
//父組件
import tables from 'commons/commonPage/Tables'
<!-- 表格 -->
<tables :tableData='tableData'></tables>
//子組件
<div class="tables">
<table callpadding="0" cellspacing="0">
<thead>
<tr>
<th v-for="(v,i) in theadList" :key="i">{{v}}</th> //動態(tài)頭部
</tr>
</thead>
<tbody>
<tr
v-for="(v, i) in tableData"
:key="i"
:class="i % 2 == 0 ? 'even' : ''"
>
<td v-for="(z,j) in theadList.length" :key="j"> //動態(tài)表格主體
<span>{{thead[j] == Object.keys(tableData[0])[j] ? v[thead[j]] : '--'}}</span>
</td>
</tr>
</tbody>
</table>
</div>
export default {
data() {
return {
theadList: [],
thead:[]
};
},
props: {
tableData: {
type: Array,
default: () => {
return [];
},
},
},
created(){
this.disposeThead(this.tableData[0])
},
methods: {
// 處理頭部數(shù)據(jù)，根據(jù)傳入的數(shù)據(jù)鸟辅，判斷顯示幾條數(shù)據(jù)
disposeThead(theads) {
this.thead = Object.keys(theads)
this.thead.forEach((v,i) => {
let string = ''
v.split('').forEach((z,j) => {
let str = z.charCodeAt(); //轉(zhuǎn)換成Ascll
if (str >= 65 && str <= 90) {
string += z;
}else if (str >= 97 && str <= 122) {
string += z.toUpperCase();
}else {
string += z;
}
})
this.theadList.push(string)
})
// this.theadList = thead
},
},
};
現(xiàn)在主要是處理一維數(shù)組爽航，后續(xù)會完善！感謝提寶貴意見萌腿！
