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>
标签:vue,name,temp,age,Element,item,result,Table,id From: https://www.cnblogs.com/sayshap/p/17784513.html