avue+element-ui实现动态table | 表头和数据从后台获取
1、element-ui代码<template><basic-container><el-table:data="dataList"size="small "stripeborderstyle="width: 100%"><el-table-columnv-for="(evnHead,index) in headList".
·
1、element-ui代码
<template>
<basic-container>
<el-table
:data="dataList"
size="small "
stripe
border
style="width: 100%"
>
<el-table-column
v-for="(evnHead,index) in headList"
:key="`evnHead-${index}`"
:label="evnHead.label"
width="150"
align="center"
>
<template slot-scope="scope">
<span >{{scope.row[evnHead.port]}}</span>
</template>
</el-table-column>
</el-table>
<avue-crud :option="option"
:table-loading="loading"
:data="data"
:page.sync="page"
:permission="permissionList"
:before-open="beforeOpen"
v-model="form"
ref="crud"
@row-update="rowUpdate"
@row-save="rowSave"
@row-del="rowDel"
@search-change="searchChange"
@search-reset="searchReset"
@selection-change="selectionChange"
@current-change="currentChange"
@size-change="sizeChange"
@refresh-change="refreshChange"
@on-load="onLoad">
<template slot="menuLeft">
<el-button type="danger"
size="small"
icon="el-icon-delete"
plain
v-if="permission.jdequipmentstandard_delete"
@click="handleDelete">删 除
</el-button>
</template>
</avue-crud>
</basic-container>
</template>
添加默认数据:
export default {
data() {
return {
form: {},
query: {},
loading: true,
page: {
pageSize: 10,
currentPage: 1,
total: 0
},
selectionList: [],
dataList: [
{shengao:"170cm",tizhong:"200kg",xiongwei:"90cm",yaowei:"70cm",tunwei:"93cm",xuexing:"A",xuechanggui:"正常"},
{shengao:"170cm",tizhong:"200kg",xiongwei:"90cm",yaowei:"70cm",tunwei:"93cm",xuexing:"A",xuechanggui:"正常"},
{shengao:"170cm",tizhong:"200kg",xiongwei:"90cm",yaowei:"70cm",tunwei:"93cm",xuexing:"A",xuechanggui:"正常"},
{shengao:"170cm",tizhong:"200kg",xiongwei:"90cm",yaowei:"70cm",tunwei:"93cm",xuexing:"A",xuechanggui:"正常"},
{shengao:"170cm",tizhong:"200kg",xiongwei:"90cm",yaowei:"70cm",tunwei:"93cm",xuexing:"A",xuechanggui:"正常"},
{shengao:"170cm",tizhong:"200kg",xiongwei:"90cm",yaowei:"70cm",tunwei:"93cm",xuexing:"A",xuechanggui:"正常"},
{shengao:"170cm",tizhong:"200kg",xiongwei:"90cm",yaowei:"70cm",tunwei:"93cm",xuexing:"A",xuechanggui:"正常"},
{shengao:"170cm",tizhong:"200kg",xiongwei:"90cm",yaowei:"70cm",tunwei:"93cm",xuexing:"A",xuechanggui:"正常"},
{shengao:"170cm",tizhong:"200kg",xiongwei:"90cm",yaowei:"70cm",tunwei:"93cm",xuexing:"A",xuechanggui:"正常"},
{shengao:"170cm",tizhong:"200kg",xiongwei:"90cm",yaowei:"70cm",tunwei:"93cm",xuexing:"A",xuechanggui:"正常"}
], //表格数据
headList:[
{port:"shengao",label:"身高"},
{port:"tizhong",label:"体重"},
{port:"xiongwei",label:"胸围"},
{port:"yaowei",label:"腰围"},
{port:"tunwei",label:"臀围"},
{port:"xuexing",label:"血型"},
{port:"xuechanggui",label:"血常规"}
], //表头
}}
//从后台获取数据后覆盖默认数据
var tempJson = JSON.parse(res.data.data.records[1].entityJson);
console.log(tempJson);
this.headList=tempJson.headTitle;
this.dataList=tempJson.bodyData;
更多推荐
已为社区贡献3条内容
所有评论(0)