超级表格例子 ​

<template>
  <div class="table-box">
    <!-- columns配置表格列和查询列 requestApi为调用后端接口的函数 -->
    <!-- moreConfig,配置查询列后面的操作按钮,下面有导出示例 -->
    <ProTable 
      :columns="columns" 
      :requestApi="queryList" 
      :moreConfig="moreConfig">
    <ProTable>
  </div>
</template>

<script setup>
  // 后端接口
  import { queryTypeCodeList, queryList, exportApi } from '@/api/modules/packagingManage.js'
    // 后端接口
  import { getType } from '../utils/getType.js'
  import dayjs from 'dayjs'
  import { useDownload } from '@/hooks/useDownload.js'
  import ProTable from '@/components/ProTable'

  // 给下拉框的enum,即下拉框下拉数据
  const typeList = ref([])
  const specList = ref([])
  const iceSpecList = ref([])
  const boxSpecList = ref([])

  //函数调用,获取包材类型
  getType('packingType').then((res) => {
    typeList.value = res
  })
  getType('iceFloe').then((res) => {
    iceSpecList.value = res
  })
  getType('pack').then((res) => {
    boxSpecList.value = res
  })


  const getSpecList = (searchParam, value) => {
    //清空specId
    searchParam.specId = ''

    let realValue = typeList.value.find((item) => item.id === value).realValue
    if (!realValue || realValue === 'WDJ') {
      specList.value = []
    } else if (realValue === 'BP') {
      specList.value = iceSpecList.value
    } else {
      specList.value = boxSpecList.value
    }
  }
  const columns = [
    { type: 'index', label: '#', width: 80 },
    {
      search: true,
      searchType: 'date', //输入框类型
      prop: 'createTime', //v-model绑定的属性
      label: '统计时间', //拼接placeholder
      isShow: false,
      format: (value, row) => {
        return dayjs(value).format('YYYY-MM-DD')
      },
      searchInitParam: dayjs(new Date()).format('YYYY-MM-DD') //默认值
    },
    {
      search: true,
      searchType: 'text',
      prop: 'areaName',
      label: '地区名称'
    },
    {
      search: true,
      searchType: 'text',
      prop: 'warehouseName',
      label: '仓库名称'
    },
    {
      search: true,
      searchType: 'select',
      prop: 'typeId',
      label: '包材类型',
      enum: typeList, //下拉列表
      toLabel: 'value', // enum用于label
      toValue: 'id', // enum用于value
      // 绑定给下拉框的事件
      searchEvent: {
        change: getSpecList
      }
    },
    {
      search: true,
      searchType: 'select',
      prop: 'specId',
      replaceProp: 'specName',  // 该列显示的是specName而不是specId
      label: '包材规格',
      enum: specList, //下拉列表
      toLabel: 'value',
      toValue: 'id'
    },
    { prop: 'stockNum', label: '当前库存' },
    { prop: 'safeNum', label: '周期安全库存' },
    { prop: 'useNum', label: '当前在途数量' }
  ]

const moreConfig = [
  {
    title: '导出',
    cb: (searchParam) => {
      let fileName = dayjs(new Date()).format('YYYY-MM-DD') + '安全库存'
      useDownload(exportApi, fileName, searchParam)
    }
  }
]
</script>