ITPub博客

首页 > 应用开发 > Html/css > 西瓜口袋拼团系统开发

西瓜口袋拼团系统开发

原创 Html/css 作者:wxt020 时间:2020-12-16 11:17:54 0 删除 编辑

商品分类完成以后,西瓜口袋拼团系统开发找广州许生自然轮到了品牌功能了。

先看看我们要实现的效果:
在这里插入图片描述

接下来,我们从0开始,实现下从前端到后端的完整开发。

7.1.设计前端页面

为了方便看到效果,我们新建一个MyBrand.vue(注意先停掉服务器),从0开始搭建。
在这里插入图片描述

内容初始化一下:

<template>
  <span>
    hello
  </span>
</template>
<script>
  export default {
    name: "myBrand"
  }
</script>
<!-- scoped:当前样式只作用于当前组件的节点 -->
<style scoped>
</style>12345678910111213141516

改变router新的index.js,将路由地址指向MyBrand.vue
在这里插入图片描述

打开服务器,再次查看页面:
在这里插入图片描述

干干净净了。只剩hello

7.1.1.查询表格

大家看到这个原型页面肯定能看出,其主体就是一个table。我们去Vuetify查看有关table的文档:
在这里插入图片描述

仔细阅读,发现 v-data-table中有以下核心属性:

  • dark:是否使用黑暗色彩主题,默认是false

  • expand:表格的行是否可以展开,默认是false

  • headers:定义表头的数组,数组的每个元素就是一个表头信息对象,结构:

    {
      text: string, // 表头的显示文本
      value: string, // 表头对应的每行数据的key
      align: 'left' | 'center' | 'right', // 位置
      sortable: boolean, // 是否可排序
      class: string[] | string,// 样式
      width: string,// 宽度}12345678
  • items:表格的数据的数组,数组的每个元素是一行数据的对象,对象的key要与表头的value一致

  • loading:是否显示加载数据的进度条,默认是false

  • no-data-text:当没有查询到数据时显示的提示信息,string类型,无默认值

  • pagination.sync:包含分页和排序信息的对象,将其与vue实例中的属性关联,表格的分页或排序按钮被触发时,会自动将最新的分页和排序信息更新。


来自 “ ITPUB博客 ” ,链接:http://blog.itpub.net/69984164/viewspace-2742643/,如需转载,请注明出处,否则将追究法律责任。

请登录后发表评论 登录
全部评论
新零售拼购商业模式系统开发找许生微/电17340689890,我们能定制开发:我们了解市场上的所有的热门案例、热门模式,不单单是单一的一种模式,软件等多种商业模式系统,我们都能为您定制开发,支持定制开发。

注册时间:2020-09-19

  • 博文量
    16
  • 访问量
    6800