table组件

移动端（h5页，小标题）

PC端

移动端：Vant ,Cube-UI , NutUI

PC端:    element-ui  (饿了么)，Ant Design of Vue（蚂蚁），iView（个人）

小程序：uniapp

学习组件库的基本方法是查文档，遇到困难时提 issue

1首先通过命令： npm i element-ui -S 安装  -S为生产环境依赖，上线时也要一起打包发布

2到mainjs中引入并注册  注意：此时不仅要引入组件还要引入样式，写法固定可以直接到官网上面复制粘贴

3剩下的就是用哪个组件直接参考组件文档 cv 使用即可，按照要求修改成自己想要的样式。

1数据源由table组件的data属性来指定（不需要我们自己用v-for指令来循环）

2data，决定表格的数据。其中的包含行列内容数据的属性是一个数组，数组中的每一个元素是一个对象，一个对象就表示一行。

3列，决定表格结构。 列由el-table-column决定，列的数据就是数组中每一个对象（行）中的数据，将对象的属性赋给prop属性用来更改列的展示内容，下面有三个属性需要掌握：

①label：决定当前列显示出的标题

②prop：决定当前列数据的来源。对于表格来说， 它的数据是一个数组，每一个元素是一个对象，这里的prop值就是这个对象中的属性名

prop="date"。 这里的prop就是用来从每一个对象中取出属性名为date的 属性值。

③width: 用来设置列的宽度。如果不设置，它会自适应。

data中的数据就是  列  所需要携带的属性，行中有列

当我们想要渲染一些自定义的内容，例如， *** 作按钮时，就需要在对应列中，使用 template  标签包裹我们的自定义渲染内容，这时用的就是自定义插槽的机制

要自定义内容：1 删除prop属性   2用 插槽

例：想要将数字转换成对应代表的男女

table 表格基本使用组件，让你制作简单表格只需要专注内容，而不用过度专注样式。

此组件基本全平台支持。（支付宝，百度，头条小程序理论上都支持，但是没有很细致的测试这几个平台）

github 地址： >

安装脚手架

初始化如下图，选择Vue3、Less、vue3-NutUI模板：

安装后可能会出现一些告警提示，并提示npm audit ，如下图

如果忽略它，在run dev时会报错，并且报错提示还比较难懂。

这个报错的原因是taro的版本不一致所引起，需要运行 npm audit fix 进行修复，修复后再运行就正常了。

31 引入组件

32 页面使用组件

NUTUI几个有意思的组件，如table, card,fixednav

41 init初始化

appjs中初始化，输入云开发ID

42 编写云函数（另说明）

43调用云函数

用于多端展示，taro应该是有其之长处的。如果仅是用于微信小程序开发，不如用微信开发者工具。

小程序

第一个web项目-微信小程序后端开发



第一个web项目-微信小程序后端开发

前言

需求分析

团队分工

总体设计

开发工具及编码实现

小程序前端

后端

数据库

接口代码

管理系统前端10

管理系统前端20

测试

后端本地测试

前后端联合测试

部署

总结

第一个web项目-微信小程序后端开发

前言

去年暑假一个偶然的机会我和几位同学加入了学院一位老师主持的教改项目，需求是开发一个基于SPOC与翻转课堂的计算机组成原理课程的学习app（类似慕课、知到），后来经过讨论决定降低难度，先做一个微信小程序，附带一个后台管理系统，于是我的第一个web项目就开始了~

需求分析

这里简单介绍下SPOC和翻转课堂的意思

翻转课堂

“翻转课堂”（Flipping Classroom）是一种颠覆传统教学由“课堂授课听讲 + 课后作业练习”转变为“课前自主学习 + 课堂协作探究”的新型教学模式。

SPOC

SPOC（Small Private Online Course）一般被译为小规模限制性在线课程或者小规模私有型网络课程，音译为“私播课”。

这次项目的需求是开发一个学习类型的小程序，用户分为学生和教师，其中学生可以观看视频、课件、动画，完成作业、考试以及发布评论、点赞、回复，而教师可以上传教学视频、课件、动画和发布作业、考试、通知，以及查看学生的学习情况，也可以查看评论回复，及时解答学生的疑惑。

团队分工

团队一共有四个人，总体工作分为产品设计、前端开发、后端开发三部分，然后每部分由两人负责。其中我是负责后端开发的，同时兼任项目负责人（其实也没有听上去那么高大上，只是需要承担更多决策、协调、沟通的角色）。

总体设计

这里分为小程序和管理系统

首先是小程序，放几张使用墨刀制作的原型图，这里多说两句，市面上的小程序基本都是微信授权直接登录，最多绑定手机号，我们这个由于要统计学生的学习情况才设置了注册和登录功能

至于管理系统，由于是10月份才开始做的，而且是我和另一位做后端的同学负责的，时间比较紧，我们作为前端小白没有十分系统的方法去做开发，只是大概确定了需要做哪些模块，每个模块对哪些表的增删改查，这里原型图就不放了（较简陋）

开发工具及编码实现

小程序前端

据我了解，做前端的同学先去微信公众平台注册账号，然后做一些开发设置，具体步骤自行百度。前端用的是微信开发者工具，有不会的基本上在微信开放文档都可以找到，包括许多实用的API。

后端

这里分为数据库、接口代码两部分

数据库

用的是mysql数据库，之前是跟着学堂在线的一个小程序入门教程做的，它推荐的本地开发环境是phpstudy，里面集成了php、mysql、apache、FTP、Nginx以及数据库管理工具phpMyAdmin，关于phpMyAdmin使用请看>

用uni-table插件来生成table，是通过遍历数组生成你所需的table，主要代码如下：

<uni-table border stripe emptyText="暂无更多数据">

<uni-tr>

<uni-th align="center" width="50">序号</uni-th>

<uni-th align="center" v-for="(item, index) in headNameData" :key="index">{{itemname}}</uni-th>

</uni-tr>

<uni-tr v-for="(item, index) in tbodyDataList" :key="index">

<uni-td align="center">{{index + 1}}</uni-td>

<uni-td align="center" v-for="(item2, index2) in headNameData" :key="index2" >

{{processingData(item, item2code)}}

</uni-td>

</uni-tr>

</uni-table>

表头与表体两个数组的所需要的数据类型如下：

headNameData: [

{

name: "姓名",

code: "studentName"

},

{

name: "学号",

code: "studentId"

},

{

name: "成绩",

code: "record"

},

]

tbodyDataList: [

{

studentName: "张三",

studentId: "123456789",

record: "88"

},

{

studentName: "李四",

studentId: "234567891",

record: "95"

},

{

studentName: "王五",

studentId: "345678912",

record: "67"

}

]

headNameData数组里每个对象的code属性的属性值，正好是tbodyDataList数组里每个对象的key值,根据code拿到相应的值的方法如下：

processingData(item, code) {

var showData = "";

if (code in item) {

showData = item[code];

}

return showData;

}

code in item 的用法是：判断item对象中是否含有code属性(code这个key)，如果有，返回true，否则反之。

以上就是关于table组件全部的内容，包括:table组件、「uni-app 组件」t-table 表格、Taro3.4开发微信小程序示例等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！