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;

 

Logo

前往低代码交流专区

更多推荐