vue实现用Element Table 展现数据T图
vue实现用Element Table 展现数据T图,废话不多少,直接上干货
<template>
<div>
<el-table :data="resultTable" style="width: 100%">
<el-table-column prop="id" label="日期" width="180">
</el-table-column>
<el-table-column prop="name" label="姓名" width="180">
</el-table-column>
<el-table-column prop="age" label="地址">
</el-table-column>
</el-table>
</div>
</template>
<script>
export default {
data() {
return {
tableData: [{
id: '1',
name: '',
age: ''
}, {
id: '',
name: 'zhangshan',
age: ''
}, {
id: '',
name: '',
age: '8'
}, {
id: '2',
name: '',
age: ''
}, {
id: '',
name: 'zhangshan2',
age: ''
}, {
id: '',
name: '',
age: '9'
}, {
id: '3',
name: '',
age: ''
}, {
id: '',
name: 'zhangshan3',
age: ''
}, {
id: '',
name: '',
age: '10'
}, {
id: '',
name: 'zhangshan4',
age: ''
}],
resultTable: []
}
},
mounted() {
let result = [];
let _id = undefined;
let _name = undefined;
let _age = undefined;
this.tableData.forEach(item => {
result.push({
id: '',
name: '',
age: ''
})
_id = item.id;
_name = item.name;
_age = item.age;
this.addData(result, _id, _name, _age)
})
let _resultTable = result.filter(function(item) {
return !(item.id == "" && item.name == "" && item.age == "")
});
this.resultTable = _resultTable
},
methods: {
checkNull(data) {
if (data == null || data == undefined || data == '') {
return true
} else {
return false
}
},
addData(result, id, name, age) {
let temp_id = undefined;
let temp_name = undefined;
let temp_age = undefined;
for (var i = 0; i < result.length; i++) {
temp_id = result[i].id;
temp_name = result[i].name;
temp_age = result[i].age;
if (this.checkNull(temp_id) && !this.checkNull(id)) {
result[i].id = id
break
}
if (this.checkNull(temp_name) && !this.checkNull(name)) {
result[i].name = name
break
}
if (this.checkNull(temp_age) && !this.checkNull(age)) {
result[i].age = age
break
}
}
}
}
}
</script>
<style>
</style>
浙公网安备 33010602011771号