更新记录

1.0.8（2024-12-20） 下载此版本

重新编辑了readme文档

1.0.7（2024-12-17） 下载此版本

解决弹窗数据不能动态更新的问题

1.0.6（2024-12-17） 下载此版本

修正错误： 1、无法动态刷新表格数据的问题； 2、由于记录中某些字段为undefined时报错、表格无法显示的问题

平台兼容性

piao-table

piao-table是对uni-table的再次封装，没有什么技术含量，只是本人很讨厌反复写各种页面，所以封装了这样一个通用table组件，减少页面UI代码量

最新调整

1、新增popupSize属性，用于调整弹出对话框的尺寸，可选 'large','default','mini'，默认'default' 2、新增popupData属性，用于给弹出对话框初始化表单，数据格式见下方 3、新增confirm事件，用于监听对话框提交数据事件，返回表单数据 4、对外暴露showDialog函数，用于外部打开对话框

表头数据、表格数据格式示例

// 定义表头
const dataModel = ref({
    name: {
        label: '案件名称'
    },
    reason: {
        label: '案由',
        width: 130,
        align: 'center' // 表头列标题对齐方式，可选 center\left\right
    },
    phone: {
        label: '联系电话',
        callback: (e) => {
            // 给表格列设置回调函数
            console.log('这是回调函数', e);
        }
    },
    status: {
        label: '案件进度',
        width: 130,
        align: 'center',
        element: 'progress', //可取值：badge数字角标、progress进度条
        callback: (e) => {
            console.log('这是回调函数', e);
        }
    },
    tasks: {
        label: '任务',
        element: 'badge',
        callback: (e) => {
            console.log('这是回调函数', e);
        }
    }
});

// 表格数据
const tableData = ref([
    {
        name: '张三vsXXX人民医院',
        reason: '医疗损害责任纠纷',
        phone: '13899565241',
        status: 10, // 可以简单赋值
        tasks: {
            align: 'center',
            value: '23',
            text: '已完成'
        }
    },
    {
        name: {
            value: '李四vs马六'
        },
        reason: {
            value: '民间借贷',
            align: 'center' // 单元格对齐方式
        },
        phone: {
            value: '1777777777'
        },
        status: {
            value: 100,
            color: 'red' // 自定义颜色，默认颜色依据 value 依次变化
        },
        tasks: {
            text: '待办任务',
            value: '1',
            type: 'primary', // 可取值：default（灰色）、primary（蓝色）、success（绿色）、warning(黄色)、error(红色)，默认红色
            align: 'center'
        }
    }
]);

弹窗表单数据格式示例：

const formData = ref({
    title: {
        type: 'text',
        rules: [
            {
                required: true,
                errorMessage: '案件名称不能为空'
            },
            {
                minLength: 5,
                errorMessage: '案件名称不能少于5个字符'
            }
        ],
        placeholder: '建议命名规则：原告vs被告', 
        label: '案件名称', 
        isShow: true,
        btn: {
            type: 'primary', // 取值范围：warn、default、primary
            text: '搜索文章',
            callback: test,//注意，这里调用函数名称，不是 test()
            option: 'right' //可选：right、bottom，默认为 bottom
        }
    },
    caseReason: {
        type: 'piao-combox',
        rules: [
            {
                required: true,
                errorMessage: '案由不能为空'
            }
        ],
        placeholder: '请输入或选择案由',  
        label: '案由',  
        range: [
            { value: 0, text: '原告' },
            { value: 1, text: '被告' },
            { value: 2, text: '第三人' }
        ],
        callback: (e) => {
            form.value.setItemValue('authorizationType', 1); //让authorizationType项的值等于1，这里的key是对象的属性名称，与弹窗中调用setPopupItemValue(key,value)中的key有所不同
        },
        btn: {
            type: 'warn', // 取值范围：warn、default、primary
            text: '新增案由',
            callback: (e) => {
                console.log('表单组件按钮被单击', e);
                uni.navigateTo({
                    url: '/pages/Login/Login'
                });
            }
        }
    },
    consignorType: {
        type: 'checkbox',
        label: '委托人类型', 
        value: 0, // 给定初始值
        range: [
            { value: 0, text: '原告' },
            { value: 1, text: '被告' },
            { value: 2, text: '第三人' }
        ],
        multiple: false,
        rules: [
            {
                required: true,
                errorMessage: '请选择委托人类型'
            }
        ],
        callback: (e) => {
            console.log('我是表单回调函数，返回值：', e);
        }
    },
    authorizationType: {
        type: 'checkbox',
        label: '授权类型',
        value: 0, // 给定初始值
        range: [
            { value: 0, text: '特别授权' },
            { value: 1, text: '一般授权' }
        ],
        multiple: false,
        rules: [
            {
                required: true,
                errorMessage: '请选择授权类型'
            }
        ],
        callback: (e) => {
            console.log('我是表单回调函数，返回值：', e);
        }
    },
    content: {
        type: 'textarea',
        placeholder: '请简要描述案情', 
        label: '案情简述',
        rules: [
            {
                required: true,
                errorMessage: '请简要描述案情'
            }
        ]
    },
    party: {
        type: 'table',
        label: '案件当事人',
        range: {
            name: {
                label: '名称',
                align: 'left',
                width: '150'
            },
            partyType: {
                label: '类型'
            }
        },
        value: [
            {
                name: '张三',
                partyType: {
                    text: '原告', //仅显示text字段
                    value: 0
                },
                id: '5454546464' // 未在range中定义，不会显示在表格中，但会在删除的回调函数中返回
            },
            {
                name: '贵州省人民医院',
                partyType: {
                    text: '被告',
                    value: 1
                },
                id: '5565656565656'
            }
        ],
        btn: {
            type: 'primary', // 取值范围：warn、default、primary
            text: '添加当事人',
            callback: (e) => {
                uni.navigateTo({
                    url: '/pages/case-operate/case-add-reason'
                });
            }
        },
        callback: (e) => {
            //点击删除按钮时的回调函数
            console.log(e);
        }
    },
    chargType: {
        type: 'textarea',
        placeholder: '请写明收费方式及内容', 
        label: '收费条款', 
        rules: [
            {
                required: true,
                errorMessage: '请填写收费条款'
            }
        ]
    },
    undertake: {
        type: 'checkbox',
        label: '承办律师',
        value: [], //当multiple为true时，value的值为数组类型
        range: [
            {
                text: '张律师',
                value: '10000000'
            },
            {
                text: '李律师',
                value: '20000000'
            },
            {
                text: '胡律师',
                value: '30000000'
            }
        ],
        multiple: true
    },
    grade: {
        type: 'picker',
        label: '年级',
        range: [
            //必填
            {
                text: '一年级',
                value: '1-0',
                children: [
                    {
                        text: '1.1班',
                        value: '1-1'
                    },
                    {
                        text: '1.2班',
                        value: '1-2'
                    }
                ]
            },
            {
                text: '二年级',
                value: '2-0'
            },
            {
                text: '三年级',
                value: '3-0'
            }
        ],
        placeholder: '请选择年级'
    },
    avatar: {
        type: 'file',
        label: '图片'
    }
});

页面调用示例

<template>
    <view class="table-contain">
        <piao-table
            ref="table"
            :dataModel="dataModel"
            :tableData="tableData"
            :searchItem="searchItem"
            :operateSlot="operateSlot"
            popupSize="large"
            :popupData="formData"
            popupTitle="编辑信息"
            @confirm="confirm"
        >
            <template v-slot="{ data }">
                <el-button type="primary" plain size="small" @click="editRecord(data)">
                    编辑
                </el-button>
                <el-button type="danger" plain size="small" @click="deleteTd(data)">
                    删除
                </el-button>
            </template>
            <template v-slot:operation>
                <el-button type="primary" style="margin-right: 10px" @click="addRecord">
                    新增记录
                </el-button>
            </template>
        </piao-table>
    </view>
</template>

<script setup>
import { ref, onMounted, watch } from 'vue';

const table = ref(); // 定义piao-table的句柄
const tableData = ref();// table的数据变量

// 弹窗表单初始化数据，具体数据格式见上
const formData = ref({
    _id: {
        type: 'text', //表单类型
        label: '用户ID',
        disabled: true
    },
});

const tem = ref();

async function editRecord(e) {
    // 这里点击按钮以后打开弹窗，并且打算动态给表单一些初始值——比如记录的_id，其数据是动态从表格中获取
    // 这里就需要给弹窗的表单数据popupData重新赋值，让表单对数据变化作出响应，否则表单不会更新数据
    tem.value=formData.value
    tem.value._id.value="e._id"//修改了字段_id的属性value的值。如果直接修改 formData.value._id.value的值不会触发表单数据更新
    formData.value = tem.value; // 将修改后的变量重新赋值给formData,这样才能够触发组件数据更新
    table.value.showDialog(); // 打开弹窗
}

// 监听弹窗表单提交事件
async function confirm(e) {
     console.log(e,'弹窗表单返回的数据');
}

// 初始化表头：具体数据参照前面数据格式
const dataModel = ref({
    user_name: {
        label: '用户名',
        align: 'center'
    },
    nick_name: {
        label: '昵称',
        align: 'center' // 表头对齐方式，可选 center\left\right
        width: 180
    },
    ......
});

// 是否在表格右侧增加插槽列
const operateSlot = ref({
    title: '操作',
    align: 'center',
    width: 180
});

// 搜索框输入关键词时，对哪些列的数据响应
const searchItem = ref(['user_name', 'nick_name', 'mobile', 'role']);

// 自定义插槽中按钮点击事件，通过data获取数据行的数据
function deleteTd(param) {
    console.log(param._id);
}
</script>

<style></style>