如何使用微信小程序设计和设置表格并展示数据?

如何使用微信小程序设计和设置表格并展示数据?,第1张

1、双击打亩扰开微信小程序开发工具,新建一个对应的界面,然迅升旦后插入多个view元素,并添加class属性,如下图所示

2、没有给这些view样式,然后保存代码并预览效果,结果出现从上到下排列,如下图所示:

3、在对应的wxss文件中,设置表格的表头和表体的样式,如下图所示:

4、再次保存代码并在模拟器中预览效果,发现形成了表格,如下图所示:

5、在thtd添加一个border-bottom属性,设置底部边框属性,如下图所示:

6、结果发现最后一行的底部边框展示的有点笑嫌粗,是因为table和td设置了边框,加粗了,如下图所示:

移动端(h5页,小标题)

PC端

移动端:Vant ,Cube-UI , NutUI

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

小程序:uniapp

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/yw/8191406.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-04-14
下一篇 2023-04-14

发表评论

登录后才能评论

评论列表(0条)

保存