uniapp表格全面指南

一、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/zh-tw/n/190233.html