更新记录

1.0.1（2024-10-03） 下载此版本

更新示例

1.0.0（2024-10-03） 下载此版本

piao-table是对uni-table的再次封装。

平台兼容性

piao-table

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

示例

<template>
    <view class="table-contain">
        <piao-table
            :dataModel="dataModel"
            :tableData="tableData"
            :searchItem="searchItem"
            :operateSlot="operateSlot"
        >
            <template v-slot="{ data }">
                <button type="primary" size="mini">编辑</button>
                <button type="warn" size="mini">删除</button>
            </template>
        </piao-table>
    </view>
</template>

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

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: '',
        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 operateSlot = ref({
    title: '操作',
    align: 'center',
    width: 180
});

// 搜索框输入关键词时，对哪些列的数据响应，示例中对 name\phone\reason列字符进行概括搜索。支持多关键词搜索，使用空格分隔关键词，如： 张三 12
const searchItem = ref(['name', 'phone', 'reason']);

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