更新记录

1.1.4（2023-11-30）

更新表格背景色自定义功能

1.1.3（2023-06-08）

1.优化操作列宽度 2.底部添加合计项

1.1.2（2023-03-08）

更新

平台兼容性

zyTable 表格

zyTable 表格参数属性

columns属性

操作列属性

zyTable 表格事件

zyTable 使用方式

<template>
    <view class="content">
        <zy-table border :headList="headList" :dataList="dataList" checkbox num :radio="false"
            @handleSelectionChange="handleSelectionChange" @lineClick="lineClick" @editConfirm="editConfirm"
            :operationList="operationList" :firstFixed="false" :lastFixed="false" :stripe="false" :loading="loading"></zy-table>
    </view>
</template>
<script>
    import list from '@/api/data';
    export default {
        data() {
            return {
                //表头数据
                headList: [{
                    name: '编号',
                    key: 'id',
                    sort: true
                }, {
                    name: '姓名',
                    key: 'name',
                    edit: true,
                }, {
                    name: '分数',
                    key: 'score',
                    sort: true,
                    sum:true
                }, {
                    name: '奖牌',
                    keyType: 'img',
                    key: 'img',
                }, {
                    name: '年龄',
                    key: 'age',
                    sort: true
                }, {
                    name: '年级',
                    key: 'grade',
                    width: '200',
                }, {
                    name: '班级',
                    key: 'class',
                    width: '200',
                }, {
                    name: '学号',
                    key: 'num',
                    sort: true
                }, {
                    name: '性别',
                    key: 'sex'
                }, {
                    name: '手机',
                    keyType: 'tel',
                    key: 'tel',
                    width: '200',
                }, {
                    name: '标记',
                    keyType: 'icon',
                    key: 'icon'
                }, ],
                //默认表格数据
                dataList: [],
                //操作列数据
                operationList: [{
                    kind: "switch",
                    handle: this.switchChange,
                }, {
                    kind: "button",
                    type: "primary",
                    handle: this.editBtn,
                    label: "编辑",
                }, {
                    kind: "button",
                    type: "warn",
                    handle: this.delBtn,
                    label: "删除",
                }, {
                    kind: "button",
                    type: "",
                    handle: this.detailBtn,
                    label: "详情",
                }],
                index: '',
                loading: true
            }
        },
        mounted() {
            this.getList()
        },
        methods: {
            //获取表格中数据
            getList() {
                this.dataList = list
            },
            //表格多选
            handleSelectionChange(e) {
                uni.showToast({
                    title: "已选" + e.value.length + "条",
                    duration: 2000,
                    icon: 'none'
                });
            },
            //表格单选（表格用到单选框时表格数据中需添加id值）
            radioChange(e) {
                console.log(e)
                uni.showToast({
                    title: e.value.id,
                    duration: 2000,
                    icon: 'none'
                });
            },
            //表格行点击事件
            lineClick(e) {
                console.log(e)
                uni.showToast({
                    // title: "已选第" + e.index + "行：" + e.value.name,
                    duration: 2000,
                    icon: 'none'
                });
            },
            //表格列编辑开启事件
            editConfirm(e) {
                console.log(e)
                uni.showToast({
                    title: "编辑成功!",
                    duration: 2000,
                    icon: 'none'
                });
            },
            //表格开关（开关按钮和button的disabled联动）
            switchChange(item, index, $event) {
                uni.showToast({
                    title: item.name + $event.detail.value,
                    duration: 2000,
                    icon: 'none'
                });
            },
            // 表格编辑
            editBtn(item, index) {
                console.log(item, index)
                uni.showToast({
                    title: "编辑：" + index + item.name,
                    duration: 2000,
                    icon: 'none'
                });
            },
            // 表格删除
            delBtn(item, index) {
                console.log(item, index)
                this.dataList.splice(index, 1)
                uni.showToast({
                    title: item.name + "删除成功！",
                    duration: 2000,
                    icon: 'none'
                });
            },
            // 表格详情
            detailBtn(item, index) {
                console.log(item, index)
                uni.showToast({
                    title: "详情：" + index + item.name,
                    duration: 2000,
                    icon: 'none'
                });
            },
        },
    }
</script>

<style lang="scss" scoped>
    @import '@/common/zy.scss';
</style>

表格中使用到图标列的请下载uni-icons(https://ext.dcloud.net.cn/plugin?name=uni-icons)

如使用过程中有任何问题，或者您有一些好的建议，欢迎联系QQ：2360273432