Element UI 表格数据不显示问题排查:示例代码分析
<template>
<el-table :data="tableData" style="width: 100%">
<template v-for="item,index in tablelist" :key="index">
<el-table-column prop="{{ item.name }}" :label="item.lable" />
</template>
</el-table>
</template>
<script setup lang="ts">
import { reactive,ref } from 'vue'
const tableData=reactive([
{
data:'2020-08-08',
time:'申报时间',
state :'待提交',
projectname:'某公司大数据建设',
projectmain:'某公司主体描述',
ProjectSinkingCompany:'某子公司',
start:'2020-09-01',
finish:'2021-08-01',
totalinvestment:'1000万元',
ProjectAuthority:'发改',
grade:'国家级',
DepartmentInCharge:'科室一',
}
])
const tablelist=reactive([
{lable:'复选框',name:''},
{lable:'序号',name:''},
{lable:'申报时间',name:'data'},
{lable:'状态',name:'state'},
{lable:'项目名称',name:'projectname'},
{lable:'项目主体',name:'projectmain'},
{lable:'项目下沉公司',name:'ProjectSinkingCompany'},
{lable:'拟开工时间',name:'start'},
{lable:'拟竣工时间',name:'finish'},
{lable:'总投资',name:'totalinvestment'},
{lable:'项目主管部门',name:'ProjectAuthority'},
{lable:'级别',name:'grade'},
{lable:'主管科室',name:'DepartmentInCharge'}])
const operate=reactive([true,true,true,true])
</script>
<style scoped>
</style>表格数据不显示是为什么
<p>根据提供的代码,表格数据不显示可能是因为注释掉了 <code>tableData</code> 的定义。需要将注释取消掉或者重新定义 <code>tableData</code>,并且确保 <code>tableData</code> 中的属性名与 <code>tablelist</code> 中的 <code>name</code> 对应。另外,<code>el-table-column</code> 中的 <code>prop</code> 属性应该绑定到 <code>item.name</code>,而不是字符串 '“{{ item.name }}”'。</p>
原文地址: https://www.cveoy.top/t/topic/mNZV 著作权归作者所有。请勿转载和采集!