Vue3 + element UI 动态表格

发布于:2022-11-16 ⋅ 阅读:(13) ⋅ 点赞:(0) ⋅ 评论:(0)

定义数据

tables2: [{
				current_time: "2022-10-18 14:34:00",
				run_time: "12.788",
				did: "5",
				result: "注册成功",
				cred: "",
				pw: ""
			}, {
				current_time: "2022-10-18 14:34:00",
				run_time: "12.788",
				did: "123",
				result: "注册成功",
				cred: "",
				pw: ""
			}, {
				current_time: "2022-10-18 14:34:00",
				run_time: "12.788",
				did: "123",
				result: "注册成功",
				cred: "",
				pw: ""
			}, {
				current_time: "2022-10-18 14:34:00",
				run_time: "12.788",
				did: "123",
				result: "注册成功",
				cred: "",
				pw: ""
			}, {
				current_time: "2022-10-18 14:34:00",
				run_time: "12.788",
				did: "123",
				result: "注册成功",
				cred: "",
				pw: ""
			}, {
				current_time: "2022-10-18 14:34:00",
				run_time: "12.788",
				did: "123",
				result: "注册成功",
				cred: "",
				pw: ""
			},
			]

定义Key和prop

tableName: [{
			labels: '用戶DID',
			dataName: 'did'
		}, {
			labels: '用戶Cred',
			dataName: 'cred'
		}, {
			labels: '用戶pw',
			dataName: 'pw'
		}, {
			labels: '认证时间',
			dataName: 'current_time'
		}, {
			labels: '认证结果',
			dataName: 'result'
		}, {
			labels: '时间消耗/ms',
			dataName: 'run_time'
		}],

Vue + elementUI 实现

<el-table :data="tables2" border stripe style="width: 100% ;border-radius: 10px!important;">
	 <el-table-column type="index" label="No." :width="100" />
	 <el-table-column align="center" 
	 v-for="col in tableName" 
	 :prop="col.dataName"
	 :label="col.labels" 
	 :key="col.dataName" 
	 :width="150" />
	 </el-table>

效果图

在这里插入图片描述

注意点

  • element-table-column 生成的label名如果也需要动态自动生成,必须写到数组里
  • label名和对应值不在传来的数组里,单一且固定的写法 <el-table-column type="index" label="No." :width="100" />
  • label名和对应值在传来的数组里,且需要动态增加
<el-table-column align="center" 
	 v-for="col in tableName" 
	 :prop="col.dataName"
	 :label="col.labels" 
	 :key="col.dataName" 
	 :width="150" />

优化

  • 还不知道如何根据传来的数组修改prop

报错

  • Invalid prop: type check failed for prop "data". Expected Array, got Object
  • TypeError: reduce is not a function in JavaScript
  • data.indexOf is not a funtion
  • 使用elementUI框架的el-table组件时,里面的:data="tableData"中的tableDatal数据类型不是数组,或者是使用elementUI框架的Form 表单组件时里面的:model="form"中的form数据不是对象类型才导致这种错误
-   <el-table
      :data="patentlist"
      style="width: 100%">
  • data中 patents: null, patentlist:[],
  • 函数中赋值this.patentlist[0]= this.patents
  • 就是将收到的数据(对象类型)放入数组的0下标处(el-table唯一允许的类型)
  • 不可以直接修改patents为[],会接收的时候无法赋值this.patents = response.data.data
  • 如果收到的对象中包含一个对象,需要先对内部的对象进行解析
  • 未解决map函数报错Uncaught (in promise) TypeError: .map is not a function at eval
const results = response.data.data
        results.map(item => {
          item.patentProperties = JSON.parse(item.patentProperties)
        })
  • 修改为 this.patents.patentProperties = JSON.parse(this.patents.patentProperties)可以使用