Table 表格

pa-table 能够快速搭建你需要的表格，只需简单的配置即可创建一个带有 筛选/搜索/排序/分页 等功能的完善表格，当然你还可以使用 插槽 功能扩展使你的表格更加强大！

基础使用

只需要配置 structure 即表格的结构配置，并添加数据来源 request-api 即可完成表格的创建，如果表格数据中存根据 选项（select） 获取展示的值，还需配置 ex-options 来匹配选项的值。点击表格右上角 工具图标按钮，即可打开表格的筛选配置，在这里你可以对每一个列进行 筛选/选择/左右固定/是否展示列 的处理。点击表格右上角 刷新图标按钮，即可单独再次获取当前已经筛选后的表数据，数据来源会再次请求 request-api 所提供的接口。通过 ref 可以获取到表格实例，然后带去表格内值的方法，如刷新页面。获取数据等功能

接口请求参数(params)：

Label-Text

Label-Select

Label-Number

操作

合计 0 条

前往

页

<template>
  <pa-title :padding="['bottom']">接口请求参数(params)：</pa-title>

  <code-view v-model:html="params"> </code-view>
  <div class="h400">
    <pa-table id="base-table-v2-demo" ref="proTable" :structure="tableConfig" :request-api="getTableList" :ex-options="exOptions">
      <template #operation>
        <pa-button key="key1" is="save" index="1"> 编辑1 </pa-button>
        <pa-button key="key2" is="trash" index="2"> 编辑2 </pa-button>
        <pa-button key="key3" is="trash" index="3"> 编辑3 </pa-button>
        <pa-button key="key4" is="edit" index="4"> 编辑4 </pa-button>
      </template>
    </pa-table>
  </div>
</template>

<script lang="ts" setup>
import { MStructureV2Type } from "M_Types";
import { ref } from "vue";
import { randNum } from "@/package/components/tools/rand-char";

const proTable = ref();
const params = ref({});
const tableConfig: MStructureV2Type.TableV2[] = [
  { label: "Label-Text", prop: "Text", fixed: "left" },
  { label: "Label-Select", prop: "Select", filterType: "select" },
  {
    label: "Label-Number",
    prop: "Number",
    width: 150,
    cellConfig: {
      type: "number",
      display: true,
      precision: 2
    }
  },
  { label: "操作", prop: "operation" }
];

const exOptions = ref({
  Select: [
    { label: "选项1", value: 1 },
    { label: "选项2", value: 2 },
    { label: "选项3", value: 3 },
    { label: "选项4", value: 4 }
  ]
});

const maxLength = 200;
const domeList = Array.from({ length: maxLength }, (_, i) => ({
  Text: `Text-${i + 1}`,
  Select: randNum(1, "1234"),
  Switch: true,
  Number: randNum(Number(randNum(1, "1234")), "0123456789")
}));

async function getTableList(query: any) {
  params.value = query;
  const { PageNum, PageSize } = query.Page;
  const List: any = domeList.slice((PageNum - 1) * PageSize, PageNum * PageSize);
  return new Promise(resolve => {
    resolve({ Data: { TotalCount: domeList.length, List }, Code: 200 });
  });
}
</script>

<style scoped></style>

显示代码

选择功能（Selection / Radio）

在使用带有多选的表格时，必须选择填写 row-key 其值为返回对象数组中对象的 唯一 键值，并且在表格配置中添加 selection / radio 一行以打开表的选择列。 *如果 row-key 出现非唯一时，可能出现勾选内容和实际内容 错误/偏差/无法勾选 等情况！ 获取选中值 可以通过 ref 获取实例，然后获取实例中 selectedList 字段，数据包含单条数据的完整内容。

多选（Selection）

typescript

<pa-table
  id="select-table-v2-demo"
  ref="proTable"
  row-key="Text"
  use-select 
  :structure="tableConfig"
  :request-api="getTableList"
  :ex-options="exOptions"
  @select-row-back="selectRowBack"
  @select-row-all-back="selectRowAllBack"
/>

Label-Text

Label-Select

已选择 0 条

合计 0 条

前往

页

显示代码

单选（Radio）

typescript

<pa-table
  id="select-table-v2-demo"
  ref="proTable"
  row-key="Text"
  use-radio 
  :structure="tableConfig"
  :request-api="getTableList"
  :ex-options="exOptions"
  @select-row-back="selectRowBack"
 />

Label-Text

Label-Select

合计 0 条

前往

页

显示代码

额外展示（Expand）

使用 use-expand 打开表的展开按钮，在表格内添加插槽 expand 以展示展开内容

typescript

<pa-table
  id="select-table-v2-demo"
  ref="proTable"
  row-key="Text"
  use-expand 
  :structure="tableConfig"
  :request-api="getTableList"
  :ex-options="exOptions"
/>

Label-Text

Label-Select

操作

合计 0 条

前往

页

显示代码

子数据（Children）

在使用带有子数据的表格时，必须选择填写 row-key 其值为返回对象数组中对象的 唯一 键值，并且在表格配置中添加 row 一行以打开表的展开列。列表渲染表格时，当表格数据中出现 children 切其值为 数组 类型则回被视为子数据。 *如果 row-key 出现非唯一时，可能出现勾选内容和实际内容 错误/偏差/无法展开 等情况！

DANGER

children 作为关键字，不可作为自定义对象使用，其值必须与同级结构相同。

typescript

<pa-table
  id="select-table-v2-demo"
  ref="proTable"
  row-key="Text"
  use-children 
  :structure="tableConfig"
  :request-api="getTableList"
  :ex-options="exOptions"
/>

Label-Text

Label-Select

操作

合计 0 条

前往

页

显示代码

单元格（Cell）

只需在配置中设置 cellConfig 即可使用 Cell元素 作为表格内容展示。通过 getSubmitTableList 获取表格内填写的内容。

typescript

const tableConfig: MStructureV2Type.TableV2[] = [
  { label: "Cell-Input", prop: "Input", cellConfig: { type: "input" } },
  { label: "Cell-Select", prop: "Select", cellConfig: { type: "select" } },
  ...
];

Cell-Text

Cell-Input

Cell-Number

Cell-Select

Cell-Multiple-Select

Cell-Switch

Cell-Radio

Cell-Checkbox

Cell-Cascader

Cell-Time

Cell-Icon

Cell-File

Cell-Request-Select

Cell-Online-Select

操作

合计 0 条

前往

页

<template>
  <div style="height: 200px">
    <pa-table
      id="cell-table-demo"
      ref="proTable"
      :structure="tableConfig"
      :request-api="getTableList"
      :ex-options="exOptions"
      :ex-cell-dependent="exDependent"
      :ex-dependent="exCellDependent"
      row-key="Text"
    >
      <template #operation>
        <pa-button is="edit"> 编辑 </pa-button>
      </template>
    </pa-table>
  </div>
</template>

<script lang="ts" setup>
import { MOptionV2Type, MStructureV2Type } from "M_Types";
import { ref } from "vue";
import { randNum } from "@/package/components/tools/rand-char";

const proTable = ref();
const tableConfig: MStructureV2Type.TableV2[] = [
  { label: "Cell-Text", prop: "Text" },
  { label: "Cell-Input", prop: "Input", cellConfig: { type: "input" } },
  { label: "Cell-Number", prop: "Number", cellConfig: { type: "number", min: -10, display: true, precision: 2 } },
  { label: "Cell-Select", prop: "Select", cellConfig: { type: "select" } },
  { label: "Cell-Multiple-Select", prop: "MultipleSelect", cellConfig: { type: "multiple-select" }, width: 300 },
  { label: "Cell-Switch", prop: "Switch", cellConfig: { type: "switch", activeText: "aa", inActiveText: "bb" } },
  { label: "Cell-Radio", prop: "Radio", cellConfig: { type: "radio" } },
  { label: "Cell-Checkbox", prop: "CheckBox", cellConfig: { type: "checkbox" } },
  { label: "Cell-Cascader", prop: "Cascader", cellConfig: { type: "cascader" } },
  { label: "Cell-Time", prop: "Time", cellConfig: { type: "date-picker-group" } },
  { label: "Cell-Icon", prop: "Icon", cellConfig: { type: "select-icon" } },
  { label: "Cell-File", prop: "File", cellConfig: { type: "file" } },
  { label: "Cell-Request-Select", prop: "requestSelect", cellConfig: { type: "request-select" } },
  {
    label: "Cell-Online-Select",
    prop: "onlineSelect",
    cellConfig: { type: "online-select" }
  },
  { label: "操作", prop: "operation" }
];

const exDependent = {
  select_RequestApi: { requestSelect, requestSelect2: requestSelect, onlineSelect },
  exCellRules: {
    Input: {
      roleFn: InputRole,
      errorMessage: "Input值必须大于99"
    }
  }
};

const exCellDependent = {
  disabledRule: { Input: disabledRule },
  file_attachedData: {
    File: { FileTypeCode: "AppealLabelCodeConfirmFiles", BusinessIdentifier: "" }
  }
};

function InputRole(data) {
  return data.Input >= 99;
}

async function requestSelect() {
  // const List = await Api();
  const opt: MOptionV2Type.SelectList = [
    { label: "online-选项1", value: "request-value-1" },
    { label: "online-选项2", value: "request-value-2" }
  ];
  return opt;
}

async function onlineSelect() {
  // const List = await Api();
  const opt: MOptionV2Type.SelectList = [
    { label: "online-选项33", value: "online-value-1" },
    { label: "online-选项44", value: "online-value-2" }
  ];
  return opt;
}

function disabledRule(row) {
  return row.Input == 999;
}

const exOptions = ref({
  Select: [
    { label: "选项1", value: "select-1" },
    { label: "选项2", value: "select-2" }
  ],
  MultipleSelect: [
    { label: "多选项1", value: "multiple-select-1" },
    { label: "多选项2", value: "multiple-select-2" },
    { label: "多选项3", value: "multiple-select-3" },
    { label: "多选项4", value: "multiple-select-4" },
    { label: "多选项5", value: "multiple-select-5" }
  ],
  Switch: {
    activeText: "A",
    inActiveText: "B"
  },
  Radio: [
    { label: "A", value: "a" },
    { label: "B", value: "b" }
  ],
  CheckBox: [
    { label: "A", value: "a" },
    { label: "B", value: "b" }
  ],
  Cascader: [
    {
      label: "A",
      value: "a",
      children: [
        { label: "A-A", value: "aa" },
        { label: "A-B", value: "ab" }
      ]
    },
    {
      label: "B",
      value: "b",
      children: [
        { label: "B-A", value: "ba" },
        { label: "B-B", value: "bb" }
      ]
    }
  ]
});

const maxLength = 1;
const domeList = Array.from({ length: maxLength }, (_, i) => ({
  Text: `Text-${i + 1}`,
  Select: randNum(1, "1234"),
  Switch: true,
  Number: randNum(Number(randNum(1, "1234")), "0123456789")
}));

async function getTableList(query: any) {
  const { PageNum, PageSize } = query.Page;
  const List: any = domeList.slice((PageNum - 1) * PageSize, PageNum * PageSize);
  return new Promise(resolve => {
    resolve({ Data: { TotalCount: domeList.length, List }, Code: 200 });
  });
}
</script>

<style scoped></style>

显示代码

单元格的校验（Cell Submit）

在使用 getSubmitTableList 时，同 'm-form' 相同内部会进行数据校验，默认情况下每个单元格都是 必填项 ，可以通过配置修改，也可以通过 exDependent.submitRule 对其就行独立的校验。

typescript

<pa-table
  id="cell-table-demo-submit"
  ref="proTable"
  :structure="tableConfig"
  :request-api="getTableList"
  :ex-dependent="exDependent"
  row-key="Text"
>
  <template #operation>
    <pa-button is="edit"> 编辑 </pa-button>
  </template>

  <template #FooterCenter>
    <pa-button is="edit" @click="submitTable"> 提交表格 </pa-button>
  </template>
</pa-table>

const exDependent = {
  submitRule: {
    exCellRules: {
      Input1: [{ validator: validatorRules, trigger: "blur" }] 
    }
};

function validatorRules({ value, callback }) { 
  if (value >= 99) {
    callback();
  } else {
    callback(new Error(`Input值必须大于99`));
  }
}

FormData结果值：

效果展示

Cell-Input

Cell-Input1

Cell-Input2

Cell-Input3

合计 0 条

前往

页

<template>
  <pa-title :padding="['bottom']">FormData结果值：</pa-title>

  <code-view v-model:html="tableFormData"> </code-view>

  <pa-title :padding="['bottom']">效果展示</pa-title>
  <div style="height: 200px">
    <pa-table
      id="cell-table-demo-submit"
      ref="proTable"
      :structure="tableConfig"
      :request-api="getTableList"
      :ex-dependent="exDependent"
      row-key="Text"
    >
      <template #operation>
        <pa-button is="edit"> 编辑 </pa-button>
      </template>

      <template #FooterCenter>
        <pa-button is="edit" @click="submitTable"> 提交表格 </pa-button>
      </template>
    </pa-table>
  </div>
</template>

<script lang="ts" setup>
import { MStructureV2Type } from "M_Types";
import { ref } from "vue";

const proTable = ref();
const params = ref({});
const tableFormData = ref({});

const tableConfig: MStructureV2Type.TableV2[] = [
  { label: "Cell-Input", prop: "Input", cellConfig: { type: "input" } },
  { label: "Cell-Input1", prop: "Input1", cellConfig: { type: "input" } },
  { label: "Cell-Input2", prop: "Input2", cellConfig: { type: "input" } },
  { label: "Cell-Input3", prop: "Input3", cellConfig: { type: "input", required: false } }
];

const exDependent = {
  exCellRules: {
    Input1: [{ validator: validatorRules, trigger: "blur" }]
  }
};

function validatorRules({ value, callback }) {
  if (value >= 99) {
    callback();
  } else {
    callback(new Error(`Input值必须大于99`));
  }
}

async function getTableList(paramsData: any) {
  params.value = paramsData;
  return {
    Data: {
      TotalCount: 2,
      List: [{ Text: "Text-692f8002", Input: 999, Input1: 11, Number: 81827, Switch: true }]
    },
    Code: 200
  };
}

async function submitTable() {
  const data = await proTable.value.getSubmitTableList();
  tableFormData.value = data;
}
</script>

<style scoped>
.vp_title_label {
  height: 32px;
}
.in_title_label {
  width: 33%;
  font-size: 14px;
}
.config-box {
  flex-wrap: wrap;
  padding: 5px 10px;
  margin-top: 5px;
  margin-bottom: 10px;
  border: 1px solid var(--vp-c-divider);
  border-radius: 3px;
}
</style>

显示代码

标记（Tag）

使用 useDictionaries 获取字典结果更快捷。

typescript

const tableConfig: MStructureType.Table[] = [
  { label: "Cell-Text", prop: "Text" },
  { label: "Cell-Input", prop: "Select", cellConfig: { type: "tag" } }, 
  { label: "操作", prop: "operation" }
];

const exOptions = ref({});
nextTick(async () => {
  const Select: mTagOptionType[] = await useDictionaries("table", ["Dealer"]);
  const bgColor = ["#33b698", "#409eff"]; 
  for (let index = 0; index < Select.length; index++) {
    Select[index].tagStyle = { bgColor: bgColor[index], textColor: "#fff" }; 
  }
  exOptions.value = { Select };
});

Cell-Text

Cell-Input

操作

合计 0 条

前往

页

显示代码

外部依赖（ExDependent）

使用 useToolButton 打开表格工具按钮区域，默认情况下会展示 搜索按钮/筛选配置。
使用 usePagination 打开表格分页组件区域。
使用 embeddedToolButton 嵌入工具按钮区域，默认情况下会展示 搜索按钮/筛选配置。
使用 exPagination 对分页组件进行额外的配置。
使用 exDependent 对表格进行额外的配置。
使用 exCellDependent 对单元格进行额外的配置。

typescript

<m-table
  :ex-options="exOptions"
  :useToolButton="state.useToolButton"
  :usePagination="state.usePagination"
  use-select
  :embeddedToolButton="state.embeddedToolButton"
  :exDependent="exDependent"
  :exCellDependent="exCellDependent"
  :exPagination="exPagination"
>
</m-table>

显示筛选/刷新：

否

是

是否显示分页功能：

否

是

是否功能按钮嵌入式样式：

否

是

FormData结果值：

效果展示

Label-Text

Label-Input

Label-Select

操作

已选择 0 条

合计 0 条

前往

页

<template>
  <div class="flex config-box">
    <div class="in_title_label">显示筛选/刷新：<pa-switch v-model="state.useToolButton" /></div>
    <div class="in_title_label">是否显示分页功能：<pa-switch v-model="state.usePagination" /></div>
    <div class="in_title_label">是否功能按钮嵌入式样式：<pa-switch v-model="state.embeddedToolButton" /></div>
  </div>

  <pa-title :padding="['bottom']">FormData结果值：</pa-title>

  <code-view v-model:html="tableFormData"> </code-view>

  <pa-title :padding="['bottom']">效果展示</pa-title>
  <pa-table
    id="options-table-demo"
    ref="proTable"
    :structure="tableConfig"
    :request-api="getTableList"
    :ex-options="exOptions"
    :useToolButton="state.useToolButton"
    :usePagination="state.usePagination"
    use-select
    :embeddedToolButton="state.embeddedToolButton"
    :exPagination="exPagination"
    row-key="Text"
  >
    <template #operation>
      <pa-button is="edit"> 编辑 </pa-button>
    </template>
  </pa-table>
</template>

<script lang="ts" setup>
import { MStructureV2Type } from "M_Types";
import { ref, reactive } from "vue";

const proTable = ref();
const params = ref({});
const tableFormData = ref({});
const state = reactive({
  useToolButton: true,
  usePagination: true,
  embeddedToolButton: true
});

const tableConfig: MStructureV2Type.TableV2[] = [
  { label: "Label-Text", prop: "Text" },
  { label: "Label-Input", prop: "Input", width: 200 },
  { label: "Label-Select", prop: "Select" },
  { label: "操作", prop: "operation" }
];

const exPagination = ref({
  pageNum: 1,
  pageSize: 100,
  pageSizes: [100, 200, 300]
});

const exOptions = ref({
  Select: [
    { label: "选项1", value: "select-1" },
    { label: "选项2", value: "select-2" }
  ]
});

async function getTableList(paramsData: any) {
  params.value = paramsData;
  return {
    Data: {
      TotalCount: 2,
      List: [
        { Text: "Text-692f8002", Select: "select-2", Input: 999 },
        { Text: "Text-d2i23411", Select: "select-2", Input: 66 }
      ]
    },
    Code: 200
  };
}
</script>

<style scoped>
.vp_title_label {
  height: 32px;
}
.in_title_label {
  width: 33%;
  font-size: 14px;
}
.config-box {
  flex-wrap: wrap;
  padding: 5px 10px;
  margin-top: 5px;
  margin-bottom: 10px;
  border: 1px solid var(--vp-c-divider);
  border-radius: 3px;
}
</style>

显示代码

插槽（Slots）

html

<m-table ref="proTable" :structure="tableConfig" :request-api="getTableList">
  <template #HeaderLeft>>HeaderLeft Slot</template>
  ...
</m-table>

字段	描述
HeaderLeft	表头左侧区域
HeaderCenter	表头中间区域
ToolButton	表头右侧按钮工具区域，替换（搜索按钮/筛选配置）
ToolButtonInline	表头右侧按钮工具区域内部元素左侧
HeaderAfter	表头下方区域
BodyAppend	表格之后区域
Empty	表格无数据时，展示区域
Expand	用于 expand 模式下展示元素（需配合 config 配置）
Pagination	表格分页组件区域，替换（默认分页组件）
FooterLeft	表底左侧区域
FooterCenter	表底中间区域

HeaderLeft Slot

HeaderCenter Slot

ToolButton Slot

Label-Text

Label-Select

FooterLeft Slot

FooterCenter Slot

Pagination Slot

ToolButtonInline Slot

Label-Text

Label-Select

合计 0 条

前往

页

<template>
  <pa-table
    id="slot-table-demo1"
    ref="proTable"
    flat
    :structure="tableConfig"
    :request-api="getTableList"
    :ex-options="exOptions"
  >
    <template #HeaderLeft><div class="max-box">HeaderLeft Slot</div></template>

    <template #HeaderCenter><div class="max-box">HeaderCenter Slot</div></template>

    <template #ToolButton><div class="max-box">ToolButton Slot</div></template>

    <template #HeaderAfter><div class="max-box">HeaderAfter Slot</div></template>

    <template #BodyAppend><div class="max-box">BodyAppend Slot</div></template>

    <template #Pagination><div class="max-box">Pagination Slot</div></template>

    <template #FooterCenter><div class="max-box">FooterCenter Slot</div></template>

    <template #FooterLeft><div class="max-box">FooterLeft Slot</div></template>
  </pa-table>

  <div class="line"></div>

  <pa-table
    id="slot-table-demo2"
    ref="proTable"
    flat
    :structure="tableConfig"
    :request-api="getTableListNull"
    :ex-options="exOptions"
  >
    <template #ToolButtonInline><div class="max-inline-box">ToolButtonInline Slot</div></template>
  </pa-table>
</template>

<script lang="ts" setup>
import { ref, Ref } from "vue";
import { MStructureV2Type, MOptionV2Type } from "M_Types";

const proTable = ref();
const params = ref("");

const tableConfig: MStructureV2Type.TableV2[] = [
  { label: "Label-Text", prop: "Text" },
  { label: "Label-Select", prop: "Select", filterType: "select" }
];

const exOptions: Ref<MOptionV2Type.Default> = ref({
  Select: [
    { label: "选项1", value: 1 },
    { label: "选项2", value: 2 }
  ]
});

async function getTableList(paramsData: any) {
  params.value = paramsData;
  return {
    Data: {
      TotalCount: 2,
      List: [
        { Text: "Text-692f8002", Select: 1 },
        { Text: "Text-d2i23411", Select: 2 }
      ]
    },
    Code: 200
  };
}

async function getTableListNull(paramsData: any) {
  params.value = paramsData;
  return {
    Data: {
      TotalCount: 0,
      List: []
    },
    Code: 200
  };
}
</script>

<style scoped>
.max-box {
  display: inline-block;
  height: 100%;
  text-align: center;
  font-size: 14px;
  background-color: var(--el-color-warning-light-7);
}
.max-inline-box {
  text-align: center;
  background-color: var(--el-color-success-light-7);
}
.line {
  width: 100%;
  height: 1px;
  margin: 10px 0;
  background-color: var(--vp-c-divider);
}
</style>

显示代码

typescript

const tableConfig: MStructureV2Type.TableV2[] = [
  { label: "Label-Text", prop: "Text" },
  ...
];

`MStructureV2Type.TableV2`

字段	描述	类型	类型
label	表头展示	`Record<"en-US" \| "zh-CN", string>` `string`	—
prop	表头 prop 表 key 字段	`string`	—
width	表列列宽	`string` `number`	—
isShow	是否显示在表格当中	`boolean`	`true`
useSort	是否使用排序	`boolean`	`true`
useFilter	是否使用筛选	`boolean`	`true`
filterType	筛选时使用类型	`"input"` `"number"` `"select"` `"tag"` `"time"`	—
fixed	表列固定位置	`"left"` `"right"`	—
unitText	单位文本	`string`	—
textWarp	单元格内文字折行依据	`string`	—
cellConfig	单元格使用类型，详细配置	CellItemType	—
useSenior	`是否使用高级筛选	`boolean`	`true`
useSum	是否计入合计内容	`boolean`	`false`

`CellItemType`

描述	单元格类型
输入框	SaInputType
数字输入框	SaNumberType
选择器	SaSelectType
联级选择器	SaCascaderType
多选	SaCheckboxType
单选	SaRadioType
开关	SaSwitchType
时间选择器	SaTimeType
文件选择器	SaFileType

`SaTableType`

字段	描述	类型	默认值
id	表格 ID	`string`	—
structure	MStructureV2Type.TableV2	—	—
useSelect	是否使用选择器	`boolean`	`false`
useRadio	是否使用单选器	`boolean`	`false`
useChildren	是否使用子项选择器	`boolean`	`false`
useExpand	是否使用展开行	`boolean`	`false`
expandAuto	是否自动展开行	`boolean`	`false`
requestApi	表格数据来源接口	`(params, id) => object[]`	—
requestAuto	是否自动执行请求	`boolean`	`true`
exportApi	页面导出按钮触发方法	`(params) => object[]`	—
rowKey	当表格数据多选时，所指定的 `key` 需要保持数据 `唯一`	`string`	—
useToolButton	是否显示表格 `刷新 / 筛选` 功能	`boolean`	`true`
usePagination	是否显示分页功能	`boolean`	`true`
useExpandAll	是否显示展开全部按钮	`boolean`	`true`
useSummary	是否显示尾部合集行	`boolean`	`false`
useTableIndex	是否显示表格序号	`boolean`	`true`
useOverflowTooltip	是否使用文字超出后 Tooltip 提示完整内容	`boolean`	`true`
embeddedToolButton	是否显示表格功能按钮嵌入式样式	`boolean`	`false`
exOptions	外置筛选依赖	`MOptionV2Type.Default`	—
exDependent	外置依赖	SaTableExDependentType	—
exCellDependent	单元格外置依赖	SaTableCellExDependentType	—
exPagination	外置依赖	ExPaginationType	—
summaryConfig	自定义合计参数	sumText?: string; 合计文字 unitText?: string; // 单位文字	—
summaryFunction	自定义合计方法	(params: any) => string[]	—

`SaTableExDependentType`

字段	描述	类型
disabledRule	禁用规则	`{ [x: string]: (value) => boolean }`
displayRule	显示规则	`{ [x: string]: (value) => boolean }`
exCellRules	单元格外置依赖规则	`{ [x: string]: Array<{ validator: (rule: any, value: any, callback: any) => void; trigger: string }> }`

`SaTableCellExDependentType`

字段	描述	类型
select_RequestApi	选择器请求 Api	`{ [x: string]: ({ query: string }) => Promise<MOptionV2Type.SelectList> }`
time_disabledDateFn	时间选择器禁用日期函数	`{ [x: string]: (date: any) => boolean }`
time_shortcuts	时间选择器快捷选项	`{ [x: string]: DatePickerShortcut[] }`
file_attachedData	文件上传附带数据	`{ [x: string]: Record<string, string> }`
file_downloadTemplate	文件下载模板	`{ [x: string]: () => void }`
tag_click	标签点击事件	`{ [x: string]: (params: { row: SaTableUseType.SaTableInDataType }) => void }`
tag_disabled	标签禁用函数	`{ [x: string]: (params: { value: boolean \| number \| string }) => boolean }`

ExPaginationType 外置页码配置

字段	描述	默认值	类型
pageNum	当前页数	`1`	`number`
pageSize	每页条数	`30`	`number`
pageSizes	条数选择范围	`[20, 50, 100, 150]`	`number[]`
layout	页码功能范围	`"total, sizes, prev, pager, next, jumper"`	`string`
pagerCount	页数拆分数量	`5`	`number`

`SaTableEvents`

字段	描述	回调
onSelectRowBack	多选框点击回调	`(params: { isSelected: boolean; row: any; parentRow: any }) => void`
onSelectRowAllBack	多选框全选点击回调	`(params: { isSelected: boolean }) => void`
onRadioRowBack	单选框点击回调	`(params: { isSelected: boolean; row: any; parentRow: any }) => void`
onExpandRowBack	Expand 展开按钮点击回调	`(params: { index: number; row: Record<string, string>; state: boolean }) => void`
onExpandRowAllBack	Expand 展开全部按钮点击回调	`(state: boolean) => void`
onRenderEnd	表格渲染完成回调	`(getTableList: (params?: Record<string, string>) => Promise<any>) => void`
onTableCellChange	当单元格变化时调用的回调方法	`({prop, value, oldValue, option}) => void`

`DefineExpose`

typescript

const proTable = ref();
async function RefreshTable() {
  await proTable.value.getTableList(); 
}

方法名称	描述	请求参数
getTableList	获取表数据，调用 request-api 提供的方法	`null`
cleanTableData	清除表格数据	`null`
getSubmitTableList	获取提交表格用数据（校验表格数据并获取数据）	`null`
getTableData	获取表格内数据	`null`
setStructure_All	设置表格所有结构	`(structure: Array<SaTableItemType & SaTableUseItemType>) => void`
setStructure_Item	设置表格单个结构	`(prop: string, item: SaTableItemType & SaTableUseItemType) => void`
changeData_All	设置表格所有数据	`(data: Array<SaTableUseType.SaTableInDataType>) => void`
changeData_Item	设置表格单个数据	`(prop: string, value: SaTableUseType.SaTableInDataType) => void`

Table 表格 ​

基础使用 ​

选择功能（Selection / Radio） ​

多选（Selection） ​

单选（Radio） ​

额外展示（Expand） ​

子数据（Children） ​

单元格（Cell） ​

单元格的校验（Cell Submit） ​

标记（Tag） ​

外部依赖（ExDependent） ​

插槽（Slots） ​

MStructureV2Type.TableV2 ​

CellItemType ​

SaTableType ​

SaTableExDependentType ​

SaTableCellExDependentType ​

SaTableEvents ​

DefineExpose ​

Table 表格

基础使用

选择功能（Selection / Radio）

多选（Selection）

单选（Radio）

额外展示（Expand）

子数据（Children）

单元格（Cell）

单元格的校验（Cell Submit）

标记（Tag）

外部依赖（ExDependent）

插槽（Slots）

`MStructureV2Type.TableV2`

`CellItemType`

`SaTableType`

`SaTableExDependentType`

`SaTableCellExDependentType`

`SaTableEvents`

`DefineExpose`