当前位置：首页 > news >正文

2025.3.27-2025.3.30

news 来源：原创 2025/5/26 9:39:19

1.useTable

复盘一下最近让同事帮忙解决的问题：

1.soybean的框架 useTable 的动态添加吗，某列：
watch(
  () => invoiceType,
  (val: any) => {
    if (val.value === 0) {
      columnChecks.value[11].checked = false;
    }
    if (val.value !== 0) {
      columnChecks.value[11].checked = true;
    }
  },
  { deep: true, immediate: true }
);

// 表格
const {
  columns,
  columnChecks,
  data
  // getData,
  // getDataByPage,
  // loading,
  // mobilePagination
  // searchParams,
  // resetSearchParams
}: any = useTable({
  apiFn: () => {
    return new Promise(resolve => {
      resolve({
        data: {
          records: [
            {
              key: 1, // 确保数据包含 key
              index: 1,
              phone: '13800138000',
              name: '张三',
              orderId: 1001,
              orderTime: new Date(),
              departure: '北京',
              destination: '上海',
              goodName: '电子产品',
              car: '京A12345',
              pay: '￥5000'
            },
            {
              key: 2, // 确保数据包含 key
              index: 1,
              phone: '13800138000',
              name: '李四',
              orderId: 1001,
              orderTime: new Date(),
              departure: '北京',
              destination: '上海',
              goodName: '电子产品',
              car: '京A12345',
              pay: '￥5000'
            }
          ],
          current: 1,
          size: 10,
          total: 200
        }
      } as any);
    });
  },
  showTotal: true,
  apiParams: {
    current: 1,
    size: 10
  } as any,
  columns: () => [
    {
      type: 'selection'
      // key: 'selection'
    },
    {
      key: 'index',
      title: '序号',
      align: 'center',
      width: 64
    },
    {
      key: 'phone',
      title: '发单人电话',
      align: 'center',
      width: 120
    },
    {
      key: 'name',
      title: '发单人姓名',
      align: 'center',
      width: 100
    },
    {
      key: 'orderId',
      title: '运单编号',
      align: 'center',
      width: 100
    },
    {
      key: 'orderTime',
      title: '发单时间',
      align: 'center',
      width: 120
    },
    {
      key: 'departure',
      title: '装货地址',
      align: 'center',
      width: 100
    },
    {
      key: 'destination',
      title: '卸货地址',
      align: 'center',
      width: 120
    },
    {
      key: 'goodName',
      title: '货物名称',
      align: 'center',
      width: 100
    },
    {
      key: 'car',
      title: '承运车',
      align: 'center',
      width: 120
    },
    {
      key: 'pay',
      title: '运单实付',
      align: 'center',
      width: 120
    },
    {
      key: 'operate',
      title: '操作',
      align: 'center',
      width: 120,
      render: () => (
        <div>
          <a href="#" onClick={() => (showCheckInfo.value = true)}>
            查看
          </a>
        </div>
      )
    }
  ]
});

2.分页器

题外话：推荐阅读文档：useTableHook 函数 | SoybeanAdmin
（这里也学会了该如何阅读文档哈~）

再说一句题外话：

export function getDispatchBlackList(data: baseParams) { // 注意此处的类型哈
  return request({
    url: '/rescue/Driver/getDispatchBlackList',
    method: 'post',
    data
  });
}

gobal.d.ts

  export interface baseParams {
    [key: string]: any;
  }

useTable

const {
  columns,
  // columnChecks,
  data,
  // getData,
  // getDataByPage,
  loading,
  pagination,
  updatePagination
  // mobilePagination
  // searchParams,
  // resetSearchParams
}: any = useTable({
  apiFn: getDispatchBlackList, // 这里只需直接添加访问接口的方法即可
  showTotal: true,
  apiParams: {
    pageNum: 1,
    pageSize: 20
  } as any,
  columns: () =>
    [
      {
        title: '司机头像',
        key: 'pic',
        align: 'center'
      },
      {
        title: '司机姓名',
        key: 'driverName',
        align: 'center'
      },
      {
        title: '手机尾号',
        key: 'phone',
        align: 'center'
      },
      {
        title: '拉黑时间',
        key: 'blackTime',
        align: 'center'
      },
      {
        title: '操作',
        key: 'operate',
        align: 'center',
        render: () => <NButton type="info">移除</NButton>
      }
    ] as any
});

完成这个诉求的根本文档重点是在步骤三和步骤四：

步骤三表明了：后端接口的返回值必须要符合相应的结构，否则就要使用transformer函数来进行修改结构了！

步骤四：