一、uniapp表格组件
uniapp提供了很多常见的组件，其中表格组件是一个十分实用的组件。在使用表格组件之前，需要在script中引用组件：
import uniGrid from "@/components/my-grid/my-grid";
export default {
components: {
uniGrid
}
}
引用完组件后，即可在template中使用<uni-grid />标签：
// 通过v-if动态切换表格的显示
因为每个网站的表格样式不同，uniapp表格组件并没有给定明确的样式，需要自己通过CSS进行展示。以上代码展示了如何使用uniapp表格组件，包括传递表头数据、表格数据和样式，以及使用v-if动态控制表格的显示。
二、uniapp布局
uniapp官方提供了几个常见的布局方案，包括flex布局、grid布局和sticky布局。表格的布局可以通过flex和sticky两种方式实现，其他方式的描述请参考官方文档。
使用flex布局可以让表格自适应页面宽度，并且随着屏幕宽度的变化而变化，代码如下：
.grid{
display:flex;
flex-wrap: wrap;
justify-content: space-between;
}
使用sticky布局可以让表格的头部和左侧固定不动，滚动时只有表格内容发生变化，代码如下：
thead{
position: -webkit-sticky; /* Safari/Chrome */
position: sticky;
top: 0;
background-color: #666;
color: #fff;
}
tbody td:first-child{
position: -webkit-sticky; /* Safari/Chrome */
position: sticky;
left: 0;
background-color: #f1f1f1;
}
三、uniapp表格插件
uniapp提供了许多表格插件，可以快速地添加一些常见的功能到表格中。比如uni-grid-checkbox插件实现复选框功能：
import uniGrid from "@/components/my-grid/my-grid";
import uniGridCheckbox from "@/components/uni-grid-checkbox/uni-grid-checkbox";
export default {
components:{
uniGrid,
uniGridCheckbox
},
data(){
return {
selectedRows: []
}
},
methods: {
handleSelect(rows){
this.selectedRows = rows;
}
}
}
在template中，可以将<uni-grid-checkbox />直接作为uni-grid的thead中最后一个单元格，从而实现复选框功能：
通过上述代码可以实现单选和多选功能，选中的行数据可以在handleSelect函数中获取。
四、uniapp表格生存海报
uniapp表格插件中还提供了生成海报的功能，具体使用方法如下：
import '@/components/uni-grid-poster/uni-grid-poster';
export default {
components:{
uniGridPoster
},
methods:{
async handleSavePoster(){
const res = await uni.share({
provider:"weixin",
scene:"WXSceneSession",
type:0,
imageUrl:this.$refs.poster.src
});
console.log(res);
}
}
}
在template中，可以将<uni-grid-poster />标签直接嵌套在uni-grid组件外层，从而实现生成海报功能：
原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/190233.html
微信扫一扫 
支付宝扫一扫 