Vue3 + element UI 动态表格

定义数据

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)可以使用