动态表格
话不多说，上代码
//父组件
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> //动态头部
</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"> //动态表格主体
<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: {
// 处理头部数据，根据传入的数据，判断显示几条数据
disposeThead(theads) {
this.thead = Object.keys(theads)
this.thead.forEach((v,i) => {
let string = ''
v.split('').forEach((z,j) => {
let str = z.charCodeAt(); //转换成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
},
},
};
现在主要是处理一维数组，后续会完善！感谢提宝贵意见！
