shuhi-ui/src/components/CommonPage/SimpleTable.vue

<!-- 编辑弹窗 -->
<template>
  <ele-pro-table
    ref="tableRef"
    :row-key="rowId"
    :columns="columns"
    :datasource="datasource"
    highlight-current-row
    :pagination="false"
    :tools="false"
    v-bind="$attrs"
  >
    <template v-for="(val, key) in slotArray" v-slot:[key]="{ row }">
      <slot :name="key" :row="row"></slot>
    </template>
  </ele-pro-table>
</template>

<script setup>
  import { ref, reactive, nextTick, useSlots } from 'vue';
  import request from '@/utils/request';
  import { pagePosts } from '@/api/system/post';

  const slotArray = useSlots();
  const props = defineProps({
    columns: {
      type: Array,
      default() {
        return [];
      }
    },
    rowId: {
      type: String,
      default: 'id'
    },
    pageUrl: {
      type: String
    },
    otherParams: {
      // 额外参数
      type: Object,
      default() {
        return {};
      }
    }
  });

  const tableRef = ref(null);

  async function queryPage(params) {
    if (!props.pageUrl) return Promise.reject(new Error('请配置pageUrl'));
    const res = await request.get(props.pageUrl, { params });
    if (res.data.code === 200) {
      return res.data;
    }
    return Promise.reject(new Error(res.data.msg));
  }

  /** 表格数据源 */
  const datasource = ({ pages, where, orders }) => {
    return queryPage({ ...where, ...orders, ...pages, ...props.otherParams });
  };

  /** 搜索 */
  const reload = (where) => {
    tableRef.value?.reload?.({ page: 1, where });
  };

  defineExpose({
    reload
  });
</script>