更新记录

V3.0（2025-03-10） 下载此版本

2025.3

平台兼容性

<template>
    <view style="padding: 60px;">
        <view class="padding-10">
            <view class="padding-10">
                默认
            </view>
            <zl-grid :list="list1" :col="4"></zl-grid>
        </view>
        <view class="padding-10">
            <view class="padding-10">
                不要边框
            </view>
            <zl-grid :showBorder="false" :list="list1"  :col="4"></zl-grid>
        </view>
        <view class="padding-10">
            <view class="padding-10">
                默认文字颜色
            </view>
            <zl-grid :showBorder="true" :list="list2"  :col="4" ></zl-grid>
        </view>
        <view class="padding-10">
            <view class="padding-10">
                默认边框颜色
            </view>
            <zl-grid :showBorder="true" cellBorderColor="red" :list="list2"  :col="4" ></zl-grid>
        </view>
        <view class="padding-10">
            <view class="padding-10">
                改变列数
            </view>
            <zl-grid :showBorder="true"  :list="list1"  :col="3" ></zl-grid>
        </view>
        <view class="padding-10">
            <view class="padding-10">
                点击获取当前元素值，并进行操作
            </view>
            <zl-grid @cellClick="cellClick" :showBorder="true"  :list="list3"  :col="3" ></zl-grid>
        </view>
        <view class="padding-10">
            <view class="padding-10">
                自定义内容
            </view>
            <zl-grid :showBorder="true"  :list="list1"  :col="3" >

                <template v-slot:default="{item}">
                    <view style="padding:10px">
                        <view style="width: 40px;height: 30px;border-radius: 2px;background-color:rgba(0,0,0,.1);margin: auto;">

                        </view>
                        <view>{{item.name}}</view>
                    </view>
                  </template>
            </zl-grid>
        </view>

    </view>
</template>
<script>
    export default{
        data(){
            return{
                list1:new Array(20).fill(null).map(()=> ({'name' : '宫格'})),
                list2:new Array(20).fill(null).map(()=> ({'name' : '宫格',color:'green'})),
                list3:new Array(20).fill(null).map(()=> ({'name' : '宫格',}))
            }
        },
        methods:{
            cellClick(e){
                console.log('点击数据：',e)
                this.$set(this.list3[e.index],'color','red')

            }

        }
    }
</script>
<style>
    page{
        background: #f5f5f5;
    }
    .padding-10{
        padding:10px;
    }
</style>

对应图片示例，直接复制粘贴即可