更新记录

0.0.1（2024-07-15）

• uni-app x table组件

平台兼容性

uni-app

uni-app x

zyy-table

(unix)组件库，一款适配 uni-app x 的轻量组件

vue:

<zyy-table :showCheckbox="true" :border="true" @selectChangeFn='selectChangeFn'>
    <zyy-tr :thead='true'>
        <zyy-td><text>名称</text></zyy-td>
        <zyy-td><text>日期</text></zyy-td>
        <zyy-td><text>地址</text></zyy-td>
    </zyy-tr>
    <zyy-tr v-for="(item,index) in (list as List[])" :key="index" :identifying="''+item.id+''">
        <zyy-td><text>{{item.name}}</text></zyy-td>
        <zyy-td><text>{{item.date}}</text></zyy-td>
        <zyy-td><text>{{item.address}}</text></zyy-td>
    </zyy-tr>
</zyy-table>

<script lang="uts" setup>
    type List = {
            id: any;
        name : string;
        date : string;
        address : string;
    }
    let list = [{
            id:1,
            name: 'Tom',
            date: '2024-07-15',
            address: 'Los Angeles',
    }, {
            id:'2',
            name: 'Tom',
            date: '2024-07-15',
            address: 'Los Angeles'
    }, {
            id:'3',
            name: 'Tom',
            date: '2024-07-15',
            address: 'Los Angeles'
    }] as List[]

    let selectChangeFn = (inf:any[])=>{
        console.log(inf,'index-INF')
    }
</script>

zyy-table

数据过多时添加scroll-view，需要设置zyy-table的宽度

/* 
 showCheckbox Boolean //是否显示多选
 border Boolean //是否显示边框
 @selectChangeFn //多选触发回调
 */

zyy-tr

/* 
 thead Boolean //是否是表头(没有使用th，所以需要区分表头和数据)
 identifying String //区分当前数据，传数据id（必传）
 disabled Boolean //是否禁用
 */

zyy-td

/* 
 width String //表格宽度（需要带单位）
 */