Vben Admin BasicTable用法，自定义查询条件表格数据

weixin_45518209

已于 2023-12-12 10:36:05 修改

阅读量2.7k

点赞数

CC 4.0 BY-SA版权

分类专栏： Vben Admin antdv 文章标签： java 前端服务器

于 2023-12-12 10:32:37 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_45518209/article/details/134942315

Vben Admin 同时被 2 个专栏收录

5 篇文章

订阅专栏

antdv

3 篇文章

订阅专栏

文章描述了一个使用Vue编写的表格组件，展示了如何使用Select和DatePicker组件进行数据筛选，以及如何实现动态加载和操作（如编辑、删除）。内容涉及表格配置、API调用和数据处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >


<BasicTable
   @register="registerTable"
   id="table"
   style="height: 100%"
>
   <!-- 表格search栏 -->
   <template #form-templateCode>
      <Select
         v-model:value="templateCode"
         show-search
         :filterOption="filterOption"
         allowClear
         :options="templateAllList"
         @change="changeTemplateCode()"
         placeholder="全部"
      />
   </template>
   <template #form-beginTime>
      <DatePicker v-model:value="beginTime" @change="changeBeginTime()" />      
   </template>
   <template #form-endTime>
      <DatePicker v-model:value="endTime" @change="changeEndTime()" />
   </template>
   <template #form-add>
      <a-button type="primary" @click="handleAdd" style="margin-left: 10px; float: right">
        增加
      </a-button>
      <a-button type="primary" @click="getTableData" style="margin-left: 10px; float: right">
        查询
      </a-button>
   </template>
   <!-- 表格操作栏 -->
   <template #bodyCell="{ column, record }">
      <TableAction
         v-if="column.dataIndex && column.dataIndex == 'action']"
         :actions="[
            {
              icon: 'clarity:note-edit-line',
              onClick: handleEdit.bind(null, record),
            },
            {
              icon: 'ant-design:delete-outlined',
              color: 'error',
              popConfirm: {
                title: '是否确认删除',
                confirm: handleDelete.bind(null, record),
                placement: 'left',
              },
            },
          ]"
       />
    </template>
</BasicTable>


<script lang="ts" setup>
  const tableData = ref([] as any);
  const tableColumns = [
    {
      title: '模板名称',
      dataIndex: 'templateName',
    },
    {
      title: '住院ID',
      dataIndex: 'visitId',
    },
    {
      title: '记录时间',
      dataIndex: 'recordTime',
    },
    {
      title: '操作',
      dataIndex: 'action',
      // slots: { customRender: 'action' },
      fixed: 'right',
      width: 90,
    },
  ];
  formSchemas: FormSchema[] = [
    {
      field: 'templateId',
      component: 'Select',
      label: '模板',
      colProps: {
        span: 8,
      },
      labelWidth: 80,
      slot: 'templateCode',
    },
    {
      field: 'beginTime',
      component: 'DatePicker',
      label: '开始时间',
      colProps: {
        span: 4,
      },
      labelWidth: 80,
      slot: 'beginTime',
    },
    {
      field: 'endTime',
      component: 'DatePicker',
      label: '结束时间',
      colProps: {
        span: 4,
      },
      labelWidth: 80,
      slot: 'endTime',
    },
    {
      field: '',
      component: 'Select',
      label: '',
      colProps: {
        span: 8,
      },
      slot: 'add',
      show: true,
    },
  ]
  const tablePaginationRight = reactive({
    total: 0,
    current: 1,
    pageSize: 10,
    showTotal: (total) => `总共 ${total} 项`,
    defaultPageSize: 10,
    pageSizeOptions: ['10', '50', '80', '100'], // 可不设置使用默认
    showSizeChanger: true, // 是否显示pagesize选择
    showQuickJumper: false, // 是否显示跳转窗
  });
  const [registerTable, { setTableData, setColumns, setProps }] = useTable({
    title: tableTitle?.value,
    dataSource: tableData.value,//如果数据需要处理
    api: getTenantList,//如果数据不需要处理，可以直接写请求接口
    columns: tableColumns,
    formConfig: {
      labelWidth: 130,
      schemas: formSchemas,
      autoSubmitOnEnter: true, // 回车事件;
      showActionButtonGroup: false,
    },
    canResize: true,
    striped: false,
    useSearchForm: true,
    // showTableSetting: true,
    bordered: true,
    showIndexColumn: false,
    pagination: tablePaginationRight,
  });
  function getTableData() {
    tableData.value = [];
    getTemplateDataPage(tableSearchParams).then((res) => {
      if (res) {
        tableSearchParams.total = res['total'];
        tablePaginationRight.current = res['current'];
        tablePaginationRight.total = res['total'];
        tablePaginationRight.pageSize = res['records'].length;
        res['records'].forEach((val) => {
          let arr = {} as any;
          dataIndexList.value.forEach((key) => {
            arr[key] = val[key] ? val[key] : '';
            arr['id'] = val['id'];
            arr['showTime'] = val['showTime'];
          });
          tableData.value.push(arr);
        });
      }
      setTableData(tableData.value);
      setProps({ pagination: tablePaginationRight });
    });
  }
</script>