vue实现用Element Table 展现数据T图

发布时间 2023-10-24 12:06:03作者: Dolen

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>