superui
Search K

Appearance

表格业务组件 ​

基础用法 ​

基础用法
根据配置生成表格
<template>
  <su-table class="vp-raw" :api="getTableList" :columns="columns" />
</template>

<script setup lang="ts">
const getTableList = () => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve({
        code: 200,
        data: {
          total: 5,
          currentPage: 1,
          list: [
            {
              id: 1,
              username: '张三',
              department: '前端',
              createTime: '2023-4-10',
            },
            {
              id: 2,
              username: '张三',
              department: '前端',
              createTime: '2023-4-10',
            },
            {
              id: 3,
              username: '张三',
              department: '前端',
              createTime: '2023-4-10',
            },
            {
              id: 4,
              username: '张三',
              department: '前端',
              createTime: '2023-4-10',
            },
            {
              id: 5,
              username: '张三',
              department: '前端',
              createTime: '2023-4-10',
            },
          ],
        },
      });
    }, 500);
  });
};

const columns = [
    {
        key: 'id',
        dataIndex: 'id',
        title: '事件ID',
    },
    {
        key: 'username',
        dataIndex: 'username',
        title: '用户名',
    },
    {
        key: 'department',
        dataIndex: 'department',
        title: '部门',
    },
    {
        key: 'createTime',
        dataIndex: 'createTime',
        title: '创建时间',
    },
];
</script>

添加搜索框查找 ​

添加搜索
根据配置生成表格和搜索项, 搜索项具体配置请查看搜索框组件说明
<template>
  <su-table class="vp-raw" search-show :api="getTableList" :columns="columns" />
</template>

<script setup lang="ts">
const getTableList = () => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve({
        code: 200,
        data: {
          total: 5,
          currentPage: 1,
          list: [
            {
              id: 1,
              username: '张三',
              department: '前端',
              createTime: '2023-4-10',
            },
            {
              id: 2,
              username: '张三',
              department: '前端',
              createTime: '2023-4-10',
            },
            {
              id: 3,
              username: '张三',
              department: '前端',
              createTime: '2023-4-10',
            },
            {
              id: 4,
              username: '张三',
              department: '前端',
              createTime: '2023-4-10',
            },
            {
              id: 5,
              username: '张三',
              department: '前端',
              createTime: '2023-4-10',
            },
          ],
        },
      });
    }, 500);
  });
};

const columns = [
    {
        key: 'id',
        dataIndex: 'id',
        title: '事件ID',
        search: 'input',
    },
    {
        key: 'username',
        dataIndex: 'username',
        title: '用户名',
        search: 'input',
    },
    {
        key: 'department',
        dataIndex: 'department',
        title: '部门',
        search: 'select',
        enum: [
          {
            lable: '前端',
            value: '前端',
          },
          {
            lable: '后端',
            value: '后端',
          }
        ]
    },
    {
        key: 'createTime',
        dataIndex: 'createTime',
        title: '创建时间',
    },
];

</script>

取消分页显示 ​

取消分页显示
表格默认开启分页，可以通过设置 isPageable 属性为 false 关闭, 设置后的数据格式与分页不同
<template>
  <su-table class="vp-raw" :isPageable="false" :api="getTableList" :columns="columns" />
</template>

<script setup lang="ts">
const getTableList = () => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve({
        code: 200,
        data: [
          {
            id: 1,
            username: "张三",
            department: "前端",
            createTime: "2023-4-10",
          },
          {
            id: 2,
            username: "张三",
            department: "前端",
            createTime: "2023-4-10",
          },
          {
            id: 3,
            username: "张三",
            department: "前端",
            createTime: "2023-4-10",
          },
          {
            id: 4,
            username: "张三",
            department: "前端",
            createTime: "2023-4-10",
          },
          {
            id: 5,
            username: "张三",
            department: "前端",
            createTime: "2023-4-10",
          },
        ],
      });
    }, 500);
  });
};

const columns = [
  {
    key: "id",
    dataIndex: "id",
    title: "事件ID",
  },
  {
    key: "username",
    dataIndex: "username",
    title: "用户名",
  },
  {
    key: "department",
    dataIndex: "department",
    title: "部门",
  },
  {
    key: "createTime",
    dataIndex: "createTime",
    title: "创建时间",
  },
];
</script>

显示表格工具栏 ​

刷新按钮/表格列显隐
设置 showTools 属性为 true 可以显示，默认不显示。1. 刷新按钮用于手动刷新表格 2.表格列显隐通过将数据存储在浏览器localStorage中持久化保存表格显示隐藏
<template>
  <su-table class="vp-raw" :api="getTableList" :columns="columns" showTools />
</template>

<script setup lang="ts">
const getTableList = () => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve({
        code: 200,
        data: {
          total: 5,
          currentPage: 1,
          list: [
            {
              id: 1,
              username: '张三',
              department: '前端',
              createTime: '2023-4-10',
            },
            {
              id: 2,
              username: '张三',
              department: '前端',
              createTime: '2023-4-10',
            },
            {
              id: 3,
              username: '张三',
              department: '前端',
              createTime: '2023-4-10',
            },
            {
              id: 4,
              username: '张三',
              department: '前端',
              createTime: '2023-4-10',
            },
            {
              id: 5,
              username: '张三',
              department: '前端',
              createTime: '2023-4-10',
            },
          ],
        },
      });
    }, 500);
  });
};

const columns = [
    {
        key: 'id',
        dataIndex: 'id',
        title: '事件ID',
    },
    {
        key: 'username',
        dataIndex: 'username',
        title: '用户名',
    },
    {
        key: 'department',
        dataIndex: 'department',
        title: '部门',
    },
    {
        key: 'createTime',
        dataIndex: 'createTime',
        title: '创建时间',
    },
];

</script>

添加一行自定义按钮 ​

自定义插槽
自定义设置位于表格上方的组件,并修改传参
<template>
  <su-table class="vp-raw" ref="slotTable" :api="getTableList" :columns="columns" :initParam="initParam"> 
    <template #extra>
      <a-button style="margin-bottom: 24px" @click="reSearch">刷新</a-button>
    </template>
  </su-table>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
const getTableList = () => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve({
        code: 200,
        data: {
          total: 5,
          currentPage: 1,
          list: [
            {
              id: 1,
              username: '张三',
              department: '前端',
              createTime: '2023-4-10',
            },
            {
              id: 2,
              username: '张三',
              department: '前端',
              createTime: '2023-4-10',
            },
            {
              id: 3,
              username: '张三',
              department: '前端',
              createTime: '2023-4-10',
            },
            {
              id: 4,
              username: '张三',
              department: '前端',
              createTime: '2023-4-10',
            },
            {
              id: 5,
              username: '张三',
              department: '前端',
              createTime: '2023-4-10',
            },
          ],
        },
      });
    }, 500);
  });
};

const columns = [
    {
        key: 'id',
        dataIndex: 'id',
        title: '事件ID',
    },
    {
        key: 'username',
        dataIndex: 'username',
        title: '用户名',
    },
    {
        key: 'department',
        dataIndex: 'department',
        title: '部门',
    },
    {
        key: 'createTime',
        dataIndex: 'createTime',
        title: '创建时间',
    },
];

let initParam = reactive({})

const slotTable = ref()
const reSearch = () => {
  initParam = {time: new Date().getTime()}
  console.log(initParam)
  slotTable.value.reset()
}
</script>

获取选中的数据 ​

选中的项：
获取选中的数据
<template>
  <div>
    <div style="margin-bottom: 24px">选中的项：{{ chooseItem }}</div>
    <su-table class="vp-raw" ref="tableGetChoose" hasSelect :api="getTableList" :columns="columns" />
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
const tableGetChoose = ref()
const chooseItem = computed(() => tableGetChoose.value?.selectedKeys)
const getTableList = () => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve({
        code: 200,
        data: {
          total: 5,
          currentPage: 1,
          list: [
            {
              id: 1,
              username: '张三',
              department: '前端',
              createTime: '2023-4-10',
            },
            {
              id: 2,
              username: '张三',
              department: '前端',
              createTime: '2023-4-10',
            },
            {
              id: 3,
              username: '张三',
              department: '前端',
              createTime: '2023-4-10',
            },
            {
              id: 4,
              username: '张三',
              department: '前端',
              createTime: '2023-4-10',
            },
            {
              id: 5,
              username: '张三',
              department: '前端',
              createTime: '2023-4-10',
            },
          ],
        },
      });
    }, 500);
  });
};

const columns = [
    {
        key: 'id',
        dataIndex: 'id',
        title: '事件ID',
    },
    {
        key: 'username',
        dataIndex: 'username',
        title: '用户名',
    },
    {
        key: 'department',
        dataIndex: 'department',
        title: '部门',
    },
    {
        key: 'createTime',
        dataIndex: 'createTime',
        title: '创建时间',
    },
];

</script>

组件参数配置 ​

参数

说明

类型

默认值

name表格名称string单页面存在有多个table并都开启showTools时需要配置
columns表格配置itemType[]配置请查看下方Columns表格配置
slot支持在表格上方添加slot="extra"--
searchShow是否显示搜索项booleanfalse
pageSizeOptions分页器string[]['10', '30', '50', '100']
isPageable是否需要分页booleanfalse
initParam默认传参object{}
hasSelect是否打开多选框booleanfalse
isScroll是否允许滚动，建议列表宽度大于800以上开启booleanfalse
scrollHeight滚动高度number800
showBorder是否显示边框booleanfalse
resetBtn是否显示重置按钮booleantrue
showOtherBtn是否显示搜索按钮旁边的按钮booleanfalse
btnText搜索按钮旁边的按钮string--
showTools是否显示列显隐按钮booleanfalse
showJumper是否显示快捷跳转booleanfalse
bordered是否显示表格边框booleanfalse
showEmpty是否显示自定义空数据的表格图片booleanfalse
mountSearch初始化组件是否搜索booleanfalse
colspan搜索项宽度number6
expandSpan按钮宽度number-

回调方法 ​

参数

说明

类型

示例

add点击新增的按钮function--
searchDone搜索完成后的回调function--

组件内暴露的值或方法 ​

参数

说明

类型

示例

selectedKeys开启多选时可用，获取当前选中的idstring[]--
pageOpt获取表格当前的分页数据object--
tableData获取表格当前的数据object--
reset用于重置分页，重新获取表格数据function--
resetCol用于重置表格列内容function--

Columns表格配置 ​

参数

说明

类型

示例

key表格列及搜索组件键值string唯一的key值
search搜索组件类别stringinput 、InputNumber 、select 、timePicker 、 timeRangePicker 、datePicker 、dateRangePicker 、cascader
title表格列名称及组件左侧名称string--
titleWidth组件左侧宽度number--
value搜索组件初始值--string、number、string[]、number[]、boolean
enumselect组件搜索项array下拉列表数据，默认取value、label
labelName自定义枚举文字string更改下拉数据取值
valueName自定义枚举值string更改下拉数据取值
api动态枚举function获取接口返回的下拉数据
params动态获取枚举的参数object{}
style组件左侧文字样式string设置文字行内样式
format时间类选项输出的格式string使用dayjs格式化时间格式：'YYYY MM DD hh:mm:ss'
dataIndextable自定义列输出string沿用自antd
width表格列宽度number沿用自antd
mininputNumber组件最小值number沿用自antd
maxinputNumber组件最大值number沿用自antd
placeholder组件无值时显示的文字string沿用自antd
labelCol组件左侧文件宽度string沿用自antd
labelAlign组件左侧文件定位string沿用自antd
wrapperCol组件宽度string沿用自antd
picker日期选项样式string沿用自antd