首页 > 其他分享 >vue实现用Element Table 展现数据T图

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

时间:2023-10-24 12:13:14浏览次数:36  
标签:vue name temp age Element item result Table id

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

相关文章

  • Element-UI的Table表头合并
    一、效果图1、原图效果2、目标效果二、实现思路1、表头第一行的第一列占零格,表头第一行的第二列占两格2、表头第一行的第一列隐藏三、完整代码<el-table:header-cell-style="headerStyle">headerStyle({row,column,rowIndex,columnIndex}){if(rowIndex===0){row......
  • Kth Largest Element in a Stream
    study/javaDesignaclasstofindthe kth largestelementinastream.Notethatitisthe kth largestelementinthesortedorder,notthe kth distinctelement.Implement KthLargest class:KthLargest(intk,int[]nums) Initializestheobjectwith......
  • iptables 初始化(docker)
    iptables-Fiptables-Xiptables-ZiptablesFORWARD-PACCEPTiptables-tnat-Fiptables-tnat-Xiptables-tnat-Zyuminstalliptables-services serviceiptablessave......
  • React技术栈支援Vue项目,你需要提前了解的
    写在前面react整体是函数式的思想,把组件设计成纯组件,状态和逻辑通过参数传入,而vue的思想是响应式的,也就是基于是数据可变的,通过对每一个属性建立Watcher来监听,当属性变化的时候,响应式的更新对应的虚拟domreact的思路通过js来生成html,所以设计了jsx,还有通过js来操作css。vue是......
  • vue-element-admin 项目中,获取当前左侧菜单栏的Id
      找到 store/modules/permission.js(需要后端在返回的菜单中,添加Id):constpermission={state:{routes:[],addRoutes:[]},mutations:{SET_ROUTES:(state,routes)=>{state.addRoutes=routes......
  • vue3 和 element-plus 实现指定单元格编辑
    思路1.获取到指定单元格的位置2.通过状态来判断是否展示编辑步骤1.定义变量去确定行和列lettableRowEditId=ref(null),//控制可编辑的每一行lettableColumnEditIndex=ref(null),//控制可编辑的每一列2.在el-table上绑定单元格的点击事件cell-click(单击)cell......
  • 使用 DDPO 在 TRL 中微调 Stable Diffusion 模型
    引言扩散模型(如DALL-E2、StableDiffusion)是一类文生图模型,在生成图像(尤其是有照片级真实感的图像)方面取得了广泛成功。然而,这些模型生成的图像可能并不总是符合人类偏好或人类意图。因此出现了对齐问题,即如何确保模型的输出与人类偏好(如“质感”)一致,或者与那种难......
  • vue3|知识点
    双向绑定Proxyproxy只支持对象ref创建的数据是空对象,绑定在其value属性上。监听属性监听对象watch(msg,func(new,old))监听对象的属性watch(()=>msg.name,func)watchEffect(func)自动监听已经引用的值......
  • 1、vue2.0的生命周期
    首先,组建从创建到销毁的过程就是它的生命周期。一共分为4个阶段,创建、挂载、更新以及销毁。第一个阶段:创建beforeCreate(){}//实例创建前,在这个函数内属性和方法都不能使用created(){}//实例已经初始化好了,也完成了数据挂载,可以修改数据、使用......
  • vue环境搭建操作手册
     (1)准备启动环境,打开终端,首先使用如下命令在管理员权限下创建安装目录:sudomkdir-p/usr/local/node然后输入密码,密码为“qingjiao”接着进入/usr/local/目录,修改安装目录拥有者和属组为“qingjiao”,命令如下:cd/usr/local/&&sudochown-Rqingjiao:qingjiaonode/......