qm-vnit-vue

ContentFormTable 表格页面 ​

提供数据查询、表格展示、分页的完整功能。

何时使用 ​

  • 涉及到表格数据的展示时可以使用

  • 需要表单检索表格数据时可以使用

开发者注意事项 ​

  • 开发者只需要传递一个获取表格数据的方法(queryTableList)即可使用。

  • 开发者可以通过给组件传递 customResponse 方法来对后端接口返回的 response 进行修改，从而满足组件需要的数据格式（参考 API 部分）。

  • 默认情况下组件会在页面初始化时进行数据查询，如果要关闭此功能，可以给组件传递 immediate: false。

更新内容 ​

  • 新版本不再提供导出下载功能，但保留导出接口。导出文件的下载需用户自己实现；

  • 将原先的 "beforeQueryAction" 属性替换成 "validateFields"；

  • 类名与样式将透传给 ContentFormTable 组件的根节点，其他属性将传递给 Table 组件；

  • 新增了 customTableSorter 方法，用来对表格排序字段的格式化；默认是 "[{ field: string, order: 'ascend' | 'descend' }]"

  • 新增了样式属性和style属性；

  • 添加了 ref 可获取组件的实例对象，该实例对象上绑定了如下属性：

    • form 获取表单实例；
    • forceUpdate() 强制更新表单内容，返回一个 Promise 实例；
    • getQueryData() 获取当前查询的表单数据，这个方法和 form.getFieldsValue() 是由区别的，getQueryData() 返回的数据是格式化之后的数据。

代码演示 ​

查看案例

案例一

vue
<script setup lang="ts">
import { ref } from 'vue';
import { ContentFormTable } from '@/library';
import { Button } from 'ant-design-vue';

const tableRef = ref<InstanceType<typeof ContentFormTable>>();

const columns = ref([
  {
    dataIndex: 'userName',
    title: '查询名称',
    formType: 'input',
  },
  {
    dataIndex: 'sex',
    title: '性别',
  },
  {
    dataIndex: 'age',
    title: '年龄',
  },
]);

function handleQueryTableList(query: any) {
  console.log(query);
  return new Promise((resolve) => {
    setTimeout(() => {
      return resolve({
        data: {
          list: [
            { userName: '小沈', sex: 'man', age: 32, id: '1' },
            { userName: '小梁', sex: 'man', age: 33, id: '2' },
            { userName: '小饶', sex: 'woman', age: 30, id: '3' },
          ],
          total: 3,
        },
      });
    }, 1000);
  });
}

function handleClick() {
  console.log(tableRef.value!.form);
  console.log(tableRef.value!.getQueryData());
  console.log(tableRef.value!.forceUpdate());
}
</script>

<template>
  <ContentFormTable ref="tableRef" rowKey="id" :columns="columns" :queryTableList="handleQueryTableList">
    <template #extra>
      <Button @click="handleClick">获取查询表单数据</Button>
    </template>
  </ContentFormTable>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import { ContentFormTable } from '@/library';
import { Button } from 'ant-design-vue';

const tableRef = ref<InstanceType<typeof ContentFormTable>>();

const columns = ref([
  {
    dataIndex: 'userName',
    title: '查询名称',
    formType: 'input',
  },
  {
    dataIndex: 'sex',
    title: '性别',
  },
  {
    dataIndex: 'age',
    title: '年龄',
  },
]);

function handleQueryTableList(query: any) {
  console.log(query);
  return new Promise((resolve) => {
    setTimeout(() => {
      return resolve({
        data: {
          list: [
            { userName: '小沈', sex: 'man', age: 32, id: '1' },
            { userName: '小梁', sex: 'man', age: 33, id: '2' },
            { userName: '小饶', sex: 'woman', age: 30, id: '3' },
          ],
          total: 3,
        },
      });
    }, 1000);
  });
}

function handleClick() {
  console.log(tableRef.value!.form);
  console.log(tableRef.value!.getQueryData());
  console.log(tableRef.value!.forceUpdate());
}
</script>

<template>
  <ContentFormTable ref="tableRef" rowKey="id" :columns="columns" :queryTableList="handleQueryTableList">
    <template #extra>
      <Button @click="handleClick">获取查询表单数据</Button>
    </template>
  </ContentFormTable>
</template>

查看案例

案例二（支持排序）

vue
<script setup lang="ts">
import { ref } from 'vue';
import { ContentFormTable } from '@/library';

const columns = ref([
  {
    dataIndex: 'userName',
    title: '查询名称',
    formType: 'input',
  },
  {
    dataIndex: 'sex',
    title: '性别',
    sorter: {
      compare: (a: any, b: any) => a.sex - b.sex,
      multiple: 1,
    },
  },
  {
    dataIndex: 'age',
    title: '年龄',
    sorter: {
      compare: (a: any, b: any) => a.age - b.age,
      multiple: 2,
    },
  },
]);

function handleQueryTableList(query: any) {
  console.log(query);
  return new Promise((resolve) => {
    setTimeout(() => {
      return resolve({
        data: {
          list: [
            { userName: '小沈', sex: 'man', age: 32, id: '1' },
            { userName: '小梁', sex: 'man', age: 33, id: '2' },
            { userName: '小饶', sex: 'woman', age: 30, id: '3' },
          ],
          total: 3,
        },
      });
    }, 1000);
  });
}

function handleSubmit(values: any) {
  console.log(values);
}

function handleReset(values: any) {
  console.log(values);
}

function customTableSorter(sorterList: any[]) {
  return sorterList.map((item) => ({ field: item.field, direction: item.order === 'ascend' ? true : false }));
}
</script>

<template>
  <ContentFormTable
    rowKey="id"
    :columns="columns"
    :queryTableList="handleQueryTableList"
    :customTableSorter="customTableSorter"
    @submit="handleSubmit"
    @reset="handleReset"
  />
</template>
<script setup lang="ts">
import { ref } from 'vue';
import { ContentFormTable } from '@/library';

const columns = ref([
  {
    dataIndex: 'userName',
    title: '查询名称',
    formType: 'input',
  },
  {
    dataIndex: 'sex',
    title: '性别',
    sorter: {
      compare: (a: any, b: any) => a.sex - b.sex,
      multiple: 1,
    },
  },
  {
    dataIndex: 'age',
    title: '年龄',
    sorter: {
      compare: (a: any, b: any) => a.age - b.age,
      multiple: 2,
    },
  },
]);

function handleQueryTableList(query: any) {
  console.log(query);
  return new Promise((resolve) => {
    setTimeout(() => {
      return resolve({
        data: {
          list: [
            { userName: '小沈', sex: 'man', age: 32, id: '1' },
            { userName: '小梁', sex: 'man', age: 33, id: '2' },
            { userName: '小饶', sex: 'woman', age: 30, id: '3' },
          ],
          total: 3,
        },
      });
    }, 1000);
  });
}

function handleSubmit(values: any) {
  console.log(values);
}

function handleReset(values: any) {
  console.log(values);
}

function customTableSorter(sorterList: any[]) {
  return sorterList.map((item) => ({ field: item.field, direction: item.order === 'ascend' ? true : false }));
}
</script>

<template>
  <ContentFormTable
    rowKey="id"
    :columns="columns"
    :queryTableList="handleQueryTableList"
    :customTableSorter="customTableSorter"
    @submit="handleSubmit"
    @reset="handleReset"
  />
</template>

查看案例

案例三（支持导出表格数据，支持表单数据验证和初始值设置，关闭自动查询数据功能）

vue
<script setup lang="ts">
import { ref } from 'vue';
import { ContentFormTable } from '@/library';
import { message } from 'ant-design-vue';

const columns = ref([
  {
    dataIndex: 'userName',
    title: '查询名称',
    formType: 'input',
    initialValue: '小沈',
  },
  {
    dataIndex: 'sex',
    title: '性别',
    formType: 'select',
    options: [
      { value: 'man', label: '男' },
      { value: 'woman', label: '女' },
    ],
    initialValue: 'man',
  },
  {
    dataIndex: 'age',
    title: '年龄',
  },
]);

// 提供验证表单的机会，返回 true 表示表示验证通过
function validateFields(query: any) {
  console.log(query);
  if (!query.userName) {
    message.warning('查询名称不能为空');
    return false;
  }

  return true;
}

// 模拟后端接口
function handleQueryTableList(query: any) {
  // 打印请求的参数，
  console.log(query);
  return new Promise((resolve) => {
    setTimeout(() => {
      return resolve({
        code: 0,
        message: 'ok',
        data: {
          list: [
            { userName: '小沈', sex: 'man', age: 32, id: '1' },
            { userName: '小梁', sex: 'man', age: 33, id: '2' },
            { userName: '小饶', sex: 'woman', age: 30, id: '3' },
          ],
          pageSize: 10,
          pageNum: 1,
          total: 3,
        },
      });
    }, 1000);
  });
}

// 对后端接口返回的内容进行格式化，满足组件需要的格式
function handleCustomResponse(response: any) {
  return { tableList: response?.data?.list ?? [], total: response?.data?.total ?? 0 };
}

function handleExportTableList(query: any) {
  console.log(query);
  return Promise.resolve();
}
</script>

<template>
  <ContentFormTable
    showExport
    rowKey="id"
    submitButtonText="点击查询"
    :immediate="false"
    :columns="columns"
    :validateFields="validateFields"
    :queryTableList="handleQueryTableList"
    :customResponse="handleCustomResponse"
    :exportTableList="handleExportTableList"
  />
</template>
<script setup lang="ts">
import { ref } from 'vue';
import { ContentFormTable } from '@/library';
import { message } from 'ant-design-vue';

const columns = ref([
  {
    dataIndex: 'userName',
    title: '查询名称',
    formType: 'input',
    initialValue: '小沈',
  },
  {
    dataIndex: 'sex',
    title: '性别',
    formType: 'select',
    options: [
      { value: 'man', label: '男' },
      { value: 'woman', label: '女' },
    ],
    initialValue: 'man',
  },
  {
    dataIndex: 'age',
    title: '年龄',
  },
]);

// 提供验证表单的机会，返回 true 表示表示验证通过
function validateFields(query: any) {
  console.log(query);
  if (!query.userName) {
    message.warning('查询名称不能为空');
    return false;
  }

  return true;
}

// 模拟后端接口
function handleQueryTableList(query: any) {
  // 打印请求的参数，
  console.log(query);
  return new Promise((resolve) => {
    setTimeout(() => {
      return resolve({
        code: 0,
        message: 'ok',
        data: {
          list: [
            { userName: '小沈', sex: 'man', age: 32, id: '1' },
            { userName: '小梁', sex: 'man', age: 33, id: '2' },
            { userName: '小饶', sex: 'woman', age: 30, id: '3' },
          ],
          pageSize: 10,
          pageNum: 1,
          total: 3,
        },
      });
    }, 1000);
  });
}

// 对后端接口返回的内容进行格式化，满足组件需要的格式
function handleCustomResponse(response: any) {
  return { tableList: response?.data?.list ?? [], total: response?.data?.total ?? 0 };
}

function handleExportTableList(query: any) {
  console.log(query);
  return Promise.resolve();
}
</script>

<template>
  <ContentFormTable
    showExport
    rowKey="id"
    submitButtonText="点击查询"
    :immediate="false"
    :columns="columns"
    :validateFields="validateFields"
    :queryTableList="handleQueryTableList"
    :customResponse="handleCustomResponse"
    :exportTableList="handleExportTableList"
  />
</template>

查看案例

案例四（支持导出表格数据，支持表单数据验证，关闭自动查询数据功能）

vue
<script setup lang="ts">
import { ref } from 'vue';
import { ContentFormTable } from '@/library';

// 当 Columns 中既没有指定 formType、也没有指定 component 时，则只展示表格数据
const columns = ref([
  {
    dataIndex: 'userName',
    title: '查询名称',
  },
  {
    dataIndex: 'sex',
    title: '性别',
  },
  {
    dataIndex: 'age',
    title: '年龄',
  },
]);

function handleQueryTableList(query: any) {
  console.log(query);
  return new Promise((resolve) => {
    setTimeout(() => {
      return resolve({
        data: {
          list: [
            { userName: '小沈', sex: 'man', age: 32, id: '1' },
            { userName: '小梁', sex: 'man', age: 33, id: '2' },
            { userName: '小饶', sex: 'woman', age: 30, id: '3' },
          ],
          total: 3,
        },
      });
    }, 1000);
  });
}
</script>

<template>
  <ContentFormTable rowKey="id" :columns="columns" :queryTableList="handleQueryTableList" />
</template>
<script setup lang="ts">
import { ref } from 'vue';
import { ContentFormTable } from '@/library';

// 当 Columns 中既没有指定 formType、也没有指定 component 时，则只展示表格数据
const columns = ref([
  {
    dataIndex: 'userName',
    title: '查询名称',
  },
  {
    dataIndex: 'sex',
    title: '性别',
  },
  {
    dataIndex: 'age',
    title: '年龄',
  },
]);

function handleQueryTableList(query: any) {
  console.log(query);
  return new Promise((resolve) => {
    setTimeout(() => {
      return resolve({
        data: {
          list: [
            { userName: '小沈', sex: 'man', age: 32, id: '1' },
            { userName: '小梁', sex: 'man', age: 33, id: '2' },
            { userName: '小饶', sex: 'woman', age: 30, id: '3' },
          ],
          total: 3,
        },
      });
    }, 1000);
  });
}
</script>

<template>
  <ContentFormTable rowKey="id" :columns="columns" :queryTableList="handleQueryTableList" />
</template>

ContentFormTable API ​

propNamedescriptiontypedefault value
cols查询表单要展示的列数number-
rowKey与 Table 组件的 rowKeys 一致string-
columns与 Table 组件的 columns 一致Columns-
showExport是否展示导出按钮booleanfalse
exportFileName定义导出的文件名string_default_file
defaultExpand是否默认展开所有查询你表单项booleantrue
submitButtonText查询表单项按钮的文本string提交
hideResetButton是否隐藏重置表单项按钮stringfalse
bordered与 Table 组件的 bordered 一致booleanfalse
immediate是否允许在组件初始化时就可以请求表格数据booleantrue
scroll与 Table 组件的 scroll 一致object-
paginationSize与 Pagination 组件的 size 一致"default"，"small""default"
tableSize与 Table 组件的 size 一致"small"，"middle"，"large""default"
rowSelection与 Table 组件的 rowSelection 一致TableProps["rowSelection"]-
validateFields提供对表单数据进行验证的机会，返回 false 将不会发送 "queryTableList" 请求function(query) {}-
queryTableList获取表格数据function(query) {}-
customResponse当接口返回的 res 无法直接满足组件需要时，使用该方法可以对 res 进行进一步处理以满足组件需要function(data) {}function (data: any) { return { tableList: data.list, total: data.total } }
showTotal与 Pagination 组件的 showTotal 一致function(total) {}function(total: number) { return 共${total}条数据 }
exportTableList导出表格数据function(query) {}-
style传递给组件根节点的样式CSSProperties，string-
class传递给组件根节点的类名string，string[]，object-
tableStyle传递 Table 组件的样式CSSProperties，string-
tableClass传递 Table 组件的类名string，string[]，object-
headerStyle传递表单组件的样式CSSProperties，string-
headerClass传递表单组件的类名string，string[]，object-

ContentFormTable 事件 ​

eventNamedescriptioncallback
paginationChange分页器事件function (pageNum, pageSize) {}

Columns ​

propNamedescriptiontype
title查询表单项的 lebelstring
properties传递给渲染组件的属性对象集合object
watch监听方法，每当对应的表单项值改变时，就会触发function (value, formModels) {}
dataFormat数据格式化方法，将原始的表单项数据转换成接口需要的格式function(value) {}
component自定义表单项内容function() {}
formType表单项内容组件的类型input，select，rangePicker，datePicker，cascader
initialValue表单项的初始值any
dataIndex表单项的 name 字段（当 name 属性存在时，以 name 属性为准）string
name表单项的 name 字段string
options传递给表单项内容组件，当 formType 为 'select' 或 'cascader' 时可以使用any[]
placeholder表单项的 placeholderstring
visibleInTable在 Table 表格中是否展示该项boolean

Released under the MIT License.

Copyright © 2019-present Evan You