Mock模拟数据并将数据展示到页面中

最新推荐文章于 2023-05-28 06:15:00 发布

郭大钰

最新推荐文章于 2023-05-28 06:15:00 发布

阅读量1.6k

点赞数

CC 4.0 BY-SA版权

分类专栏：工作学习

本文链接：https://blog.csdn.net/m0_46684624/article/details/108441825

工作学习专栏收录该内容

20 篇文章

订阅专栏

本文主要介绍了如何使用Mock生成模拟数据，并将这些数据绑定到HTML页面中进行展示，详细讲解了模拟数据的创建以及数据与页面元素的绑定过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.模拟数据

//导入mockjs
import Mock from 'mockjs'

let data = [
  {
    props: "file_name",
    desc: '@word(32)'
  },
  {
    props: "file_type",
    desc:'@word(5,10)'
  },
  {
    props:'number|1-100',
    desc:10, //
  },
  {
    props:"time",
    desc:"@date(yyyy-MM-dd hh:mm:ss)"
  },
  {
    props: "fuzzy",
    desc:'@word(40)'
  },
  {
    props: "md5",
    desc:'@word(32)'
  },
  {
    props:"sha1" ,
    desc:'@word(40)'
  },
  {
    props: "sha256",
    desc:'@word(64)'
  },
  {
    props: "cat_name",
    desc:'ELF' //
  },
  {
    props: "yara",
    desc:'"@word(10,20)"'
  },
  {
    props: "unpack",
    desc:'' //
  }
]


//这里的地址自己随便起名字，确保和axios地址一致
Mock.mock('http://localhost:3000/home', "get", data)

2.在html部分展示数据

 <el-table
      :data="tableData"
      class="data-table"
      style="width: 100%">
      <el-table-column
        prop="props"
        label="属性"
        width="260px">
      </el-table-column>
      <el-table-column
        prop="desc"
        label="描述"
        width="600">
      </el-table-column>

    </el-table>

3.数据绑定

 data() {
    return {
      tableData: null
    }
  },
  mounted() {
    //this.sha256 = this.$route.params.sha256，
      getHomeMultidata().then(res=>{
        console.log(res)
        this.tableData = res
      })
   }