更新记录

1.0.0（2025-06-19）

初始版本

平台兼容性

uni-app(4.03)

其他

超级好用并且非常基础的表格组件

使用方式

直接引用组件即可

import wlpTable from '@/components/wlp-table/wlp-table.vue'

然后声明列和数据

const Columns: TableColumn[] = [
      { label: '序号', prop: 'index'},
      { label: '分项类型', prop: 'bugetType' },
      { label: '金额', prop: 'bugetAmtNew' },
      { label: '状态', prop: 'status' },
];
const dataList = reactive([
    { index: 1, bugetType: '测试1', bugetAmtNew: 2333,status: 0},
    { index: 2, bugetType: '测试2', bugetAmtNew: 2333,status: 0},
    { index: 3, bugetType: '测试3', bugetAmtNew: 2333,status: 0},
    { index: 4, bugetType: '测试4', bugetAmtNew: 2333,status: 0}
])

注意，以下是携带插槽和携带插槽的写法，请自行食用

这是携带插槽的

    <wlp-table :columns="Columns" :data="dataList">
      <template #cell="{ column, row, index }">
        <template v-if="column.prop === 'bugetType'">
          <text>我是携带插槽{{ row.bugetType }}</text>
        </template>
        <template v-else>
          {{ formatCellValue(column.prop, row, index) }}
        </template>
      </template>
    </wlp-table>
      <p style="margin: 20px 0;">这是不携带插槽的</p>
    <wlp-table :columns="Columns" :data="dataList">
    </wlp-table>

有问题直接直接下载模板查看即可，或者欢迎留言