基本用法

本节介绍 SunlightTable 组件的基本使用方法，包括基本表格、分页、选择、搜索和工具栏等功能。

基本表格

最简单的表格使用方式，只需要提供数据和列配置。

示例

<template>
  <SunlightTable
    :data="tableData"
    :columns="columns"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { SunlightTable } from 'sunlight-ui';

// 表格数据
const tableData = ref([
  { id: 1, name: '张三', age: 25, address: '北京市朝阳区' },
  { id: 2, name: '李四', age: 30, address: '上海市浦东新区' },
  { id: 3, name: '王五', age: 28, address: '广州市天河区' },
  { id: 4, name: '赵六', age: 35, address: '深圳市南山区' },
  { id: 5, name: '孙七', age: 22, address: '杭州市西湖区' },
]);

// 列配置
const columns = [
  { prop: 'id', label: 'ID', width: 80, align: 'center' },
  { prop: 'name', label: '姓名', width: 120 },
  { prop: 'age', label: '年龄', width: 80, align: 'center' },
  { prop: 'address', label: '地址' },
];
</script>

隐藏源代码

配置说明

参数	说明	类型	默认值
data	表格数据	RowData[]	-
columns	列配置	TableItem[]	-
showToolbar	是否显示工具栏	boolean	true
showPagination	是否显示分页	boolean	false
showSelection	是否显示多选框	boolean	false
currentPage	当前页码	number	1
pageSize	每页条数	number	10
total	总条数	number	undefined
selectedRowKeys	选中行的 key 数组	(string | number)[]	undefined
hideColumns	隐藏列	(string | number)[]	[]
tableListeners	表格事件监听器	Object	undefined
tableProps	表格属性配置	Object	undefined
toolbarConfig	工具栏配置	Object	undefined
exportConfig	导出配置	Object	undefined
tableHeight	表格高度	number | string	undefined
onRowClick	行点击回调	Function	undefined
onRowDblclick	行双击回调	Function	undefined
searchColumns	搜索表单列配置	SearchColumn[]	undefined
searchParam	搜索参数	Record<string, any>	{}
searchThemeStyle	搜索主题样式	Object	undefined
visibleSearchColumns	可见的搜索列	string[]	[]
searchCollapsed	搜索表单是否收起	boolean	false

列配置详解

columns 是表格的核心配置，每个列配置项支持以下属性：

属性名	说明	类型	默认值
prop	列的唯一标识	string	-
label	列显示的标题	string	-
width	列宽度	number | string	-
minWidth	最小列宽	number | string	-
fixed	是否固定列	boolean | 'left' | 'right'	-
align	列对齐方式	'left' | 'center' | 'right'	-
headerAlign	表头对齐方式	'left' | 'center' | 'right'	-
sortable	是否可排序	boolean | 'custom'	-
sortMethod	自定义排序方法	(a: RowData, b: RowData) => number	-
filterable	是否可过滤	boolean	-
filters	过滤条件数组	Array<{ text: string; value: any }>	-
filterMethod	过滤方法	(value: any, row: RowData) => boolean	-
slotName	自定义渲染插槽名称	string	-
hide	是否隐藏该列	boolean	false
permission	权限控制字段	Permission	-
children	子列，用于复杂表头	TableItem[]	-
editable	是否可编辑	boolean	false
editType	编辑组件类型	'input' | 'input-number' | 'select' | 'date-picker' | 'textarea'	-
editProps	编辑组件的属性配置	Record<string, any>	-
editOptions	选择器选项	Array<{ label: string; value: any; disabled?: boolean }>	-

tableProps 配置项

tableProps 支持 Element Plus Table 组件的所有属性，以下是常用配置项：

配置项	说明	类型	默认值
stripe	是否显示斑马纹	boolean	false
border	是否显示边框	boolean	false
size	表格尺寸	string	default
showHeader	是否显示表头	boolean	true
highlightCurrentRow	是否高亮当前行	boolean	false
emptyText	空数据时显示的文本	string	暂无数据
defaultSort	默认排序规则	Object	{}
tooltipEffect	提示框效果	string	dark
spanMethod	单元格合并方法	Function	undefined
selectOnIndeterminate	部分选中时的行为	boolean	false
indent	树形表格的缩进	number	16
treeProps	树形表格的属性配置	Object	{}
rowClassName	行的 className	string | Function	""
rowStyle	行的 style	string | Function	""
cellClassName	单元格的 className	string | Function	""
cellStyle	单元格的 style	string | Function	""
headerRowClassName	表头行的 className	string | Function	""
headerRowStyle	表头行的 style	string | Function	""
headerCellClassName	表头单元格的 className	string | Function	""
headerCellStyle	表头单元格的 style	string | Function	""
summaryMethod	合计行计算方法	Function	undefined
summaryRows	合计行数量	number	1
lazy	是否懒加载	boolean	false
load	懒加载的加载函数	Function	undefined
showSummary	是否显示合计行	boolean	false
sortBy	排序字段	string	""
sortOrders	排序顺序数组	Array	[null, "ascending", "descending"]
defaultExpandAll	是否默认展开所有行	boolean	false
expandRowKeys	展开行的 key 数组	Array	[]
defaultExpandedKeys	默认展开的行的 key 数组	Array	[]
filterMultiple	是否多选过滤	boolean	true
filteredValue	过滤后的值	Object	{}
filters	过滤条件	Object	{}
filterMethod	过滤方法	Function	undefined
filterPlacement	过滤框的弹出位置	string	bottom-end

toolbarConfig 配置项

配置项	说明	类型	默认值
showDensity	是否显示密度切换	boolean	false
showColumnConfig	是否显示列配置	boolean	false
showRefresh	是否显示刷新按钮	boolean	false
showSearchConfig	是否显示搜索配置	boolean	false
customButtons	自定义按钮配置	Array	[]

customButtons 配置项

配置项	说明	类型	默认值
key	按钮唯一标识	string	-
label	按钮文本	string	-
type	按钮类型	string	default
size	按钮尺寸	string	small
icon	按钮图标	any	-
disabled	是否禁用	boolean	false
position	按钮位置	string	left

固定列配置

固定列功能通过 fixed 属性配置，支持以下值：

值	说明
true	固定在左侧
'left'	固定在左侧
'right'	固定在右侧
不设置	不固定

示例：固定列配置

const columns = [
  // 固定在左侧的列
  {
    prop: "id",
    label: "ID",
    width: 80,
    fixed: "left",
    align: "center",
  },
  {
    prop: "name",
    label: "姓名",
    width: 120,
    fixed: "left",
  },
  // 普通列
  {
    prop: "age",
    label: "年龄",
    width: 80,
    align: "center",
  },
  {
    prop: "city",
    label: "城市",
    width: 120,
  },
  {
    prop: "department",
    label: "部门",
    width: 120,
  },
  {
    prop: "position",
    label: "职位",
    width: 120,
  },
  // 固定在右侧的列
  {
    prop: "salary",
    label: "薪资",
    width: 100,
    fixed: "right",
    align: "right",
  },
  {
    prop: "action",
    label: "操作",
    width: 120,
    fixed: "right",
    align: "center",
    slotName: "action",
  },
];

分页功能

添加分页功能，支持页码和每页条数的双向绑定。

示例

暂无数据

共 100 条

• 1
• 2
• 3
• 4
• 5
• 6
• 10

前往

页

<template>
  <SunlightTable
    :data="tableData"
    :columns="columns"
    :show-pagination="true"
    v-model:current-page="currentPage"
    v-model:page-size="pageSize"
    :total="total"
    @pagination="handlePagination"
  />
</template>

<script setup lang="ts">
import { ref, watch } from "vue";
import { SunlightTable } from "sunlight-ui";
import { ElMessage } from "element-plus";

// 分页配置
const currentPage = ref(1);
const pageSize = ref(10);
const total = ref(100);
const tableData = ref([]);

// 模拟 API 调用
function fetchTableData(page: number, limit: number): Promise<{ data: any[]; total: number }> {
  return new Promise(resolve => {
    setTimeout(() => {
      const data = [];
      const startId = (page - 1) * limit + 1;

      // 简化生成模拟数据
      for (let i = 0; i < limit; i++) {
        const id = startId + i;
        data.push({
          id,
          name: `用户${id}`,
          age: 20 + id % 30,
          address: `地址${id}`,
          email: `user${id}@example.com`,
          phone: `1380013800${id % 10}`,
          department: ["技术部", "产品部", "设计部", "市场部"][id % 4],
        });
      }

      resolve({
        data,
        total: 100,
      });
    }, 300);
  });
}

// 加载数据
const loadData = async () => {
  try {
    const result = await fetchTableData(currentPage.value, pageSize.value);
    tableData.value = result.data;
    total.value = result.total;
  } catch (error) {
    ElMessage({
      message: "加载数据失败",
      type: "error",
    });
  }
};

// 监听分页变化
watch([currentPage, pageSize], () => {
  loadData();
});

// 初始加载数据
loadData();

const columns = [
  { prop: "id", label: "ID", width: 80, align: "center" },
  { prop: "name", label: "姓名", width: 120 },
  { prop: "age", label: "年龄", width: 80, align: "center" },
  { prop: "address", label: "地址", width: 200 },
  { prop: "email", label: "邮箱", width: 200 },
  { prop: "phone", label: "电话", width: 150 },
  { prop: "department", label: "部门", width: 120 },
];

// 分页处理
function handlePagination(data: { page: number; limit: number }) {
  currentPage.value = data.page;
  pageSize.value = data.limit;
  ElMessage({
    message: `分页变化: 第 ${data.page} 页，每页 ${data.limit} 条`,
    type: "success",
  });
}
</script>

隐藏源代码

配置说明

参数	说明	类型	默认值
showPagination	是否显示分页	boolean	false
currentPage	当前页码	number	1
pageSize	每页条数	number	10
total	总条数	number	-
pagination	分页变化事件	(data: { page: number; limit: number }) => void	-

选择功能

添加多选框功能，支持行选择和全选。

示例

选中的行: 1, 3

<template>
  <div>
    <SunlightTable
      :data="tableData"
      :columns="columns"
      :show-selection="true"
      v-model:selected-row-keys="selectedRowKeys"
      @selection-change="handleSelectionChange"
    />
    <div class="selected-info" style="margin-top: 16px;">
      选中的行: {{ selectedRowKeys.join(', ') }}
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { SunlightTable } from 'sunlight-ui';
import { ElMessage } from 'element-plus';

// 表格数据
const tableData = ref([
  { id: 1, name: '张三', age: 25, address: '北京市朝阳区' },
  { id: 2, name: '李四', age: 30, address: '上海市浦东新区' },
  { id: 3, name: '王五', age: 28, address: '广州市天河区' },
  { id: 4, name: '赵六', age: 35, address: '深圳市南山区' },
  { id: 5, name: '孙七', age: 22, address: '杭州市西湖区' },
]);

// 列配置
const columns = [
  { prop: 'id', label: 'ID', width: 80, align: 'center' },
  { prop: 'name', label: '姓名', width: 120 },
  { prop: 'age', label: '年龄', width: 80, align: 'center' },
  { prop: 'address', label: '地址' },
];

// 选中行的 key 数组
const selectedRowKeys = ref<(string | number)[]>([1, 3]);

// 选择变化处理
function handleSelectionChange(selection: any[]) {
  ElMessage({
    message: `选中了 ${selection.length} 行数据`,
    type: 'success',
  });
  // 更新选中的行 keys
  selectedRowKeys.value = selection.map(item => item.id);
}
</script>

隐藏源代码

配置说明

参数	说明	类型	默认值
showSelection	是否显示多选框	boolean	false
selectedRowKeys	选中行的 key 数组	(string | number)[]	-
selection-change	选中行变化事件	(selection: any[]) => void	-

搜索功能

添加搜索表单功能，支持按条件筛选数据。

示例

姓名

状态

请选择状态

部门

请选择部门

城市

请选择城市（异步加载）

职位

请选择职位

账户状态

请选择账户状态

入职日期

• 默认
• 中等
• 紧凑

未激活

暂无数据

共 100 条

• 1
• 2
• 3
• 4
• 5
• 6
• 10

前往

页

<template>
  <SunlightTable
    :data="tableData"
    :columns="columns"
    :toolbar-config="toolbarConfig"
    :show-pagination="true"
    v-model:current-page="currentPage"
    v-model:page-size="pageSize"
    :total="total"
    :search-columns="searchColumns"
    v-model:search-param="searchParam"
    v-model:visible-search-columns="visibleSearchColumns"
    v-model:hide-columns="hideColumns"
    :search-collapsed="searchCollapsed"
    @refresh="handleRefresh"
    @search="handleSearch"
    @reset="handleReset"
  >
    <template #isActive="{ row }">
      <el-tag :type="row.isActive ? 'success' : 'danger'" size="small">
        {{ row.isActive ? "已激活" : "未激活" }}
      </el-tag>
    </template>
    <template #tags="{ row }">
      <el-tag v-for="tag in row.tags" :key="tag" size="small" class="tag-item">
        {{ tag }}
      </el-tag>
    </template>
  </SunlightTable>
</template>

<script setup lang="ts">
import { ref, reactive, watch } from "vue";
import { SunlightTable } from "sunlight-ui";
import { ElMessage } from "element-plus";

// 工具栏配置
const toolbarConfig = reactive({
  showDensity: true,
  showColumnConfig: true,
  showRefresh: true,
  showSearchConfig: true,
});

// 搜索配置
const visibleSearchColumns = ref(["name", "status", "department", "city", "position", "isActive", "hireDate"]);
// 表头配置
const hideColumns = ref([]);
const searchCollapsed = ref(false);
const searchParam = reactive({
  name: "",
  status: null,
  department: null,
  city: null,
  position: [],
  isActive: null,
  hireDate: null,
});

// 模拟异步获取城市选项
async function fetchCityOptions() {
  await new Promise(resolve => setTimeout(resolve, 500));
  return [
    { label: "北京", value: "北京" },
    { label: "上海", value: "上海" },
    { label: "广州", value: "广州" },
    { label: "深圳", value: "深圳" },
    { label: "杭州", value: "杭州" },
    { label: "南京", value: "南京" },
    { label: "武汉", value: "武汉" },
    { label: "成都", value: "成都" },
    { label: "西安", value: "西安" },
    { label: "重庆", value: "重庆" },
  ];
}

// 搜索表单配置
const searchColumns = [
  {
    prop: "name",
    label: "姓名",
    type: "input",
    placeholder: "请输入姓名",
    span: 6,
    attrs: {
      clearable: true,
    },
  },
  {
    prop: "status",
    label: "状态",
    type: "select",
    placeholder: "请选择状态",
    span: 6,
    options: [
      { label: "激活", value: "active" },
      { label: "禁用", value: "inactive" },
    ],
    clearable: true,
  },
  {
    prop: "department",
    label: "部门",
    type: "select",
    placeholder: "请选择部门",
    span: 6,
    options: [
      { label: "技术部", value: "技术部" },
      { label: "市场部", value: "市场部" },
      { label: "销售部", value: "销售部" },
      { label: "人事部", value: "人事部" },
      { label: "财务部", value: "财务部" },
    ],
    clearable: true,
  },
  {
    prop: "city",
    label: "城市",
    type: "select",
    placeholder: "请选择城市（异步加载）",
    span: 6,
    options: () => fetchCityOptions(),
    clearable: true,
  },
  {
    prop: "position",
    label: "职位",
    type: "select",
    placeholder: "请选择职位",
    span: 6,
    multiple: true,
    options: [
      { label: "员工", value: "员工" },
      { label: "主管", value: "主管" },
      { label: "经理", value: "经理" },
      { label: "总监", value: "总监" },
      { label: "副总裁", value: "副总裁" },
      { label: "总经理", value: "总经理" },
    ],
    clearable: true,
  },
  {
    prop: "isActive",
    label: "账户状态",
    type: "select",
    placeholder: "请选择账户状态",
    span: 6,
    options: [
      { label: "已激活", value: true },
      { label: "未激活", value: false },
    ],
    clearable: true,
  },
  {
    prop: "hireDate",
    label: "入职日期",
    type: "date-picker",
    placeholder: "请选择入职日期",
    span: 6,
    config: {
      type: "date",
      format: "YYYY-MM-DD",
      valueFormat: "YYYY-MM-DD",
    },
  },
];

// 分页配置
const currentPage = ref(1);
const pageSize = ref(10);
const total = ref(100);
const tableData = ref([]);

// 列配置
const columns = [
  { prop: "id", label: "ID", width: 80, align: "center" },
  { prop: "name", label: "姓名", width: 120 },
  { prop: "age", label: "年龄", width: 80, align: "center" },
  { prop: "city", label: "城市", width: 120 },
  { prop: "department", label: "部门", width: 120 },
  { prop: "position", label: "职位", width: 120 },
  { prop: "salary", label: "薪资", width: 120, align: "center" },
  { prop: "status", label: "状态", width: 100, align: "center" },
  { prop: "hireDate", label: "入职日期", width: 120, align: "center" },
  {
    prop: "isActive",
    label: "账户状态",
    width: 100,
    align: "center",
    slotName: "isActive",
  },
  {
    prop: "tags",
    label: "技能标签",
    width: 200,
    slotName: "tags",
  },
];

// 生成模拟数据
// 简化生成模拟数据
const allData = [];
const departments = ["技术部", "市场部", "销售部", "人事部", "财务部"];
const positions = ["员工", "主管", "经理", "总监", "副总裁"];
const cities = ["北京", "上海", "广州", "深圳", "杭州"];
const skills = ["JavaScript", "Vue", "React", "Node.js", "Python"];

for (let i = 1; i <= 100; i++) {
  allData.push({
    id: i,
    name: `用户${i}`,
    age: 22 + (i % 20),
    city: cities[i % cities.length],
    department: departments[i % departments.length],
    position: positions[i % positions.length],
    salary: 5000 + i * 200,
    status: i % 3 === 0 ? "inactive" : "active",
    hireDate: `202${i % 5}-${String((i % 12) + 1).padStart(2, "0")}-${String((i % 28) + 1).padStart(2, "0")}`,
    tags: [skills[i % skills.length], skills[(i + 1) % skills.length]].slice(0, 1 + (i % 2)),
    isActive: i % 5 !== 0,
  });
}

// 模拟 API 调用
function fetchTableData(page = 1, pageSizeVal = 10, searchData = {}) {
  return new Promise(resolve => {
    setTimeout(() => {
      let filteredData = [...allData];
      //  模拟查询过滤
      if (searchData.name) {
        filteredData = filteredData.filter(item => item.name.includes(searchData.name));
      }
      if (searchData.status) {
        filteredData = filteredData.filter(item => item.status === searchData.status);
      }
      if (searchData.department) {
        filteredData = filteredData.filter(item => item.department === searchData.department);
      }
      if (searchData.city) {
        filteredData = filteredData.filter(item => item.city === searchData.city);
      }
      if (searchData.position && searchData.position.length > 0) {
        filteredData = filteredData.filter(item => searchData.position.includes(item.position));
      }
      if (searchData.isActive !== null && searchData.isActive !== undefined) {
        filteredData = filteredData.filter(item => item.isActive === searchData.isActive);
      }
      if (searchData.hireDate) {
        filteredData = filteredData.filter(item => item.hireDate >= searchData.hireDate);
      }

      const start = (page - 1) * pageSizeVal;
      const end = start + pageSizeVal;
      resolve({
        data: filteredData.slice(start, end),
        total: filteredData.length,
      });
    }, 300);
  });
}

// 加载数据
const loadData = async () => {
  const result = await fetchTableData(currentPage.value, pageSize.value, searchParam);
  tableData.value = result.data;
  total.value = result.total;
};

// 刷新处理
function handleRefresh() {
  loadData();
  ElMessage({
    message: "数据已刷新",
    type: "success",
  });
}

// 搜索处理
function handleSearch(params: Record<string, any>) {
  ElMessage({
    message: `搜索参数: ${JSON.stringify(params)}`,
    type: "success",
  });
  currentPage.value = 1;
  fetchTableData(currentPage.value, pageSize.value, params).then(result => {
    tableData.value = result.data;
    total.value = result.total;
  });
}

// 重置处理
function handleReset() {
  ElMessage({
    message: "搜索条件已重置",
    type: "success",
  });
  Object.keys(searchParam).forEach(key => {
    if (Array.isArray(searchParam[key])) {
      searchParam[key] = [];
    } else if (typeof searchParam[key] === "string") {
      searchParam[key] = "";
    } else {
      searchParam[key] = null;
    }
  });
  currentPage.value = 1;
  fetchTableData(currentPage.value, pageSize.value, searchParam).then(result => {
    tableData.value = result.data;
    total.value = result.total;
  });
}

// 监听分页变化
watch([currentPage, pageSize], () => {
  loadData();
});

// 初始加载数据
loadData();
</script>

<style scoped>
.tag-item {
  margin-right: 4px;
  margin-bottom: 4px;
}
</style>

隐藏源代码

配置说明

参数	说明	类型	默认值
searchColumns	搜索表单列配置	SearchColumn[]	-
searchParam	搜索参数	Record<string, any>	{}
search	搜索事件	(searchParam: Record<string, any>) => void	-

工具栏功能

添加工具栏功能，支持导出、列配置、密度切换等操作。

示例

• 默认
• 中等
• 紧凑

<template>
  <SunlightTable
    :data="tableData"
    :columns="columns"
    :toolbar-config="toolbarConfig"
    :export-config="exportConfig"
    @export="handleExport"
    @density-change="handleDensityChange"
    @refresh="handleRefresh"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { SunlightTable } from 'sunlight-ui';
import { ElMessage } from 'element-plus';

// 表格数据
const tableData = ref([
  { id: 1, name: '张三', age: 25, address: '北京市朝阳区' },
  { id: 2, name: '李四', age: 30, address: '上海市浦东新区' },
  { id: 3, name: '王五', age: 28, address: '广州市天河区' },
  { id: 4, name: '赵六', age: 35, address: '深圳市南山区' },
  { id: 5, name: '孙七', age: 22, address: '杭州市西湖区' },
]);

// 列配置
const columns = [
  { prop: 'id', label: 'ID', width: 80, align: 'center' },
  { prop: 'name', label: '姓名', width: 120 },
  { prop: 'age', label: '年龄', width: 80, align: 'center' },
  { prop: 'address', label: '地址' },
];

// 工具栏配置
const toolbarConfig = {
  showDensity: true,
  showExport: true,
  showColumnConfig: true,
  showRefresh: true,
  customButtons: [
    {
      key: 'add',
      label: '新增',
      type: 'primary',
      icon: 'Plus',
      position: 'left',
    },
    {
      key: 'delete',
      label: '删除',
      type: 'danger',
      icon: 'Delete',
      position: 'left',
    },
  ],
};

// 导出配置
const exportConfig = {
  enableColumnSelection: true,
  defaultExportColumns: ['id', 'name', 'age'],
};

// 导出处理
function handleExport(columns?: string[]) {
  ElMessage({
    message: `导出列: ${columns?.join(', ') || '所有列'}`,
    type: 'success',
  });
}

// 密度变化处理
function handleDensityChange(density: string) {
  ElMessage({
    message: `密度变化: ${density}`,
    type: 'success',
  });
}

// 刷新处理
function handleRefresh() {
  ElMessage({
    message: '刷新表格',
    type: 'success',
  });
}
</script>

隐藏源代码

配置说明

参数	说明	类型	默认值
data	表格数据	RowData[]	-
columns	列配置	TableItem[]	-

过滤功能

过滤功能支持多种过滤方式和配置选项。

示例

共 20 条

• 1
• 2

前往

页

<template>
  <div>
    <SunlightTable
      :data="tableData"
      :columns="columns"
      :table-props="tableProps"
      :show-pagination="true"
      :current-page="currentPage"
      :page-size="pageSize"
      :total="total"
    />
  </div>
</template>

<script setup>
import { ref, reactive } from "vue";
import { SunlightTable } from "sunlight-ui";

// 分页配置
const currentPage = ref(1);
const pageSize = ref(10);
const total = ref(20);

// 过滤相关配置
const tableProps = reactive({
  // 是否多选过滤
  filterMultiple: true,
  // 过滤后的值
  filteredValue: {},
  // 过滤框的弹出位置
  filterPlacement: "bottom-end",
});

const tableData = ref([
  {
    id: 1,
    name: "员工1",
    age: 25,
    department: "技术部",
    position: "员工",
    status: "在职",
    city: "北京",
    salary: 15000,
  },
  {
    id: 2,
    name: "员工2",
    age: 28,
    department: "市场部",
    position: "主管",
    status: "在职",
    city: "上海",
    salary: 20000,
  },
  {
    id: 3,
    name: "员工3",
    age: 30,
    department: "销售部",
    position: "经理",
    status: "在职",
    city: "广州",
    salary: 25000,
  },
  {
    id: 4,
    name: "员工4",
    age: 26,
    department: "人事部",
    position: "员工",
    status: "试用期",
    city: "深圳",
    salary: 12000,
  },
  {
    id: 5,
    name: "员工5",
    age: 32,
    department: "财务部",
    position: "主管",
    status: "在职",
    city: "杭州",
    salary: 18000,
  },
  {
    id: 6,
    name: "员工6",
    age: 27,
    department: "技术部",
    position: "员工",
    status: "在职",
    city: "北京",
    salary: 13000,
  },
  {
    id: 7,
    name: "员工7",
    age: 29,
    department: "市场部",
    position: "经理",
    status: "休假中",
    city: "上海",
    salary: 22000,
  },
  {
    id: 8,
    name: "员工8",
    age: 24,
    department: "销售部",
    position: "员工",
    status: "试用期",
    city: "广州",
    salary: 10000,
  },
  {
    id: 9,
    name: "员工9",
    age: 31,
    department: "技术部",
    position: "主管",
    status: "在职",
    city: "深圳",
    salary: 19000,
  },
  {
    id: 10,
    name: "员工10",
    age: 28,
    department: "财务部",
    position: "员工",
    status: "在职",
    city: "杭州",
    salary: 14000,
  },
  {
    id: 11,
    name: "员工11",
    age: 33,
    department: "技术部",
    position: "总监",
    status: "在职",
    city: "北京",
    salary: 30000,
  },
  {
    id: 12,
    name: "员工12",
    age: 26,
    department: "市场部",
    position: "员工",
    status: "在职",
    city: "上海",
    salary: 16000,
  },
  {
    id: 13,
    name: "员工13",
    age: 30,
    department: "销售部",
    position: "主管",
    status: "在职",
    city: "广州",
    salary: 21000,
  },
  {
    id: 14,
    name: "员工14",
    age: 27,
    department: "人事部",
    position: "主管",
    status: "在职",
    city: "深圳",
    salary: 17000,
  },
  {
    id: 15,
    name: "员工15",
    age: 29,
    department: "财务部",
    position: "经理",
    status: "在职",
    city: "杭州",
    salary: 23000,
  },
  {
    id: 16,
    name: "员工16",
    age: 25,
    department: "技术部",
    position: "员工",
    status: "离职",
    city: "北京",
    salary: 15000,
  },
  {
    id: 17,
    name: "员工17",
    age: 28,
    department: "市场部",
    position: "主管",
    status: "在职",
    city: "上海",
    salary: 19000,
  },
  {
    id: 18,
    name: "员工18",
    age: 31,
    department: "销售部",
    position: "经理",
    status: "休假中",
    city: "广州",
    salary: 24000,
  },
  {
    id: 19,
    name: "员工19",
    age: 26,
    department: "技术部",
    position: "员工",
    status: "试用期",
    city: "深圳",
    salary: 12000,
  },
  {
    id: 20,
    name: "员工20",
    age: 32,
    department: "财务部",
    position: "经理",
    status: "在职",
    city: "杭州",
    salary: 22000,
  },
]);

// 过滤方法
const filterMethod = (value, row, column) => {
  const property = column.property;
  return row[property] === value;
};

// 列配置，包含过滤功能
const columns = [
  {
    prop: "id",
    label: "ID",
    width: 80,
    align: "center",
  },
  {
    prop: "name",
    label: "姓名",
    width: 120,
  },
  {
    prop: "age",
    label: "年龄",
    width: 80,
    align: "center",
    // 年龄过滤
    filterable: true,
    filters: [
      { text: "20-29岁", value: "young" },
      { text: "30-39岁", value: "middle" },
      { text: "40岁以上", value: "old" },
    ],
    filterMethod: (value, row) => {
      if (value === "young") {
        return row.age >= 20 && row.age < 30;
      } else if (value === "middle") {
        return row.age >= 30 && row.age < 40;
      } else if (value === "old") {
        return row.age >= 40;
      }
      return true;
    },
  },
  {
    prop: "department",
    label: "部门",
    width: 120,
    // 部门过滤
    filterable: true,
    filters: [
      { text: "技术部", value: "技术部" },
      { text: "市场部", value: "市场部" },
      { text: "销售部", value: "销售部" },
      { text: "人事部", value: "人事部" },
      { text: "财务部", value: "财务部" },
    ],
    filterMethod,
  },
  {
    prop: "position",
    label: "职位",
    width: 100,
    // 职位过滤
    filterable: true,
    filters: [
      { text: "员工", value: "员工" },
      { text: "主管", value: "主管" },
      { text: "经理", value: "经理" },
      { text: "总监", value: "总监" },
    ],
    filterMethod,
  },
  {
    prop: "status",
    label: "状态",
    width: 100,
    align: "center",
    // 状态过滤
    filterable: true,
    filters: [
      { text: "在职", value: "在职" },
      { text: "离职", value: "离职" },
      { text: "休假中", value: "休假中" },
      { text: "试用期", value: "试用期" },
    ],
    filterMethod,
  },
  {
    prop: "city",
    label: "城市",
    width: 100,
    // 城市过滤，使用不同的弹出位置
    filterable: true,
    filters: [
      { text: "北京", value: "北京" },
      { text: "上海", value: "上海" },
      { text: "广州", value: "广州" },
      { text: "深圳", value: "深圳" },
      { text: "杭州", value: "杭州" },
    ],
    filterMethod,
    // 自定义过滤框弹出位置
    filterPlacement: "top-end",
  },
  {
    prop: "salary",
    label: "薪资",
    width: 120,
    align: "right",
    // 薪资过滤
    filterable: true,
    filters: [
      { text: "10k以下", value: "low" },
      { text: "10k-20k", value: "middle" },
      { text: "20k以上", value: "high" },
    ],
    filterMethod: (value, row) => {
      if (value === "low") {
        return row.salary < 10000;
      } else if (value === "middle") {
        return row.salary >= 10000 && row.salary < 20000;
      } else if (value === "high") {
        return row.salary >= 20000;
      }
      return true;
    },
  },
];
</script>

<style scoped>
/* 可根据需要添加自定义样式 */
</style>

隐藏源代码

核心配置

配置项	说明	类型	默认值
filterMultiple	是否多选过滤	boolean	true
filteredValue	过滤后的值	Object	{}
filters	过滤条件	Object	{}
filterMethod	过滤方法	Function	undefined
filterPlacement	过滤框的弹出位置	string	bottom-end

实现说明

1. 表格级别配置：通过 tableProps 配置全局过滤选项
2. 列级别配置：在列配置中设置 filterable、filters 和 filterMethod
3. 自定义过滤方法：可以为不同列设置不同的过滤逻辑
4. 过滤框位置：可以通过 filterPlacement 自定义过滤框的弹出位置

示例：过滤配置

// 表格级别过滤配置
const tableProps = {
  filterMultiple: true, // 启用多选过滤
  filteredValue: {}, // 过滤后的值
  filterPlacement: "bottom-end", // 过滤框弹出位置
};

// 列级别过滤配置
const columns = [
  {
    prop: "department",
    label: "部门",
    filterable: true, // 启用过滤
    filters: [
      // 过滤选项
      { text: "技术部", value: "技术部" },
      { text: "市场部", value: "市场部" },
      { text: "销售部", value: "销售部" },
    ],
    filterMethod: (value, row, column) => {
      // 自定义过滤逻辑
      return row[column.property] === value;
    },
  },
];

支持的过滤框弹出位置

位置值	说明
top	顶部居中
top-start	顶部左侧
top-end	顶部右侧
bottom	底部居中
bottom-start	底部左侧
bottom-end	底部右侧
left	左侧居中
left-start	左侧顶部
left-end	左侧底部
right	右侧居中
right-start	右侧顶部
right-end	右侧底部

事件处理

SunlightTable 组件支持多种事件，用于响应表格的各种操作。

示例

事件处理示例

点击表格行或工具栏按钮，查看事件触发效果

<template>
  <div>
    <h3>事件处理示例</h3>
    <p>点击表格行或工具栏按钮，查看事件触发效果</p>
    <!-- 行点击事件 -->
    <!-- @row-click="handleRowClick" -->
    <!-- 行双击事件 -->
    <!-- @row-dblclick="handleRowDblclick" -->
    <!-- 自定义按钮点击事件 -->
    <!-- @custom-button-click="handleCustomButtonClick" -->
    <!-- 刷新事件 -->
    <!-- @refresh="handleRefresh" -->
    <!-- 密度变化事件 -->
    <!-- @density-change="handleDensityChange" -->
    <!-- 打开设置事件 -->
    <!-- @open-settings="handleOpenSettings" -->
    <!-- 打开动态列事件 -->
    <!-- @open-dynamic-columns="handleOpenDynamicColumns" -->
    <SunlightTable
      :data="tableData"
      :columns="columns"
      :show-selection="true"
      :selected-row-keys="selectedRowKeys"
      @selection-change="handleSelectionChange"
    >
      <template #action="{ row }">
        <el-popconfirm title="确定删除吗?" @confirm="handleDelete(row)">
          <template #reference>
            <el-button size="small" type="danger">删除</el-button>
          </template>
        </el-popconfirm>
      </template>
    </SunlightTable>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { SunlightTable } from "sunlight-ui";
import { ElMessage } from "element-plus";

// 表格数据
const tableData = ref([
  { id: 1, name: "张三", age: 25, address: "北京市朝阳区", department: "技术部" },
  { id: 2, name: "李四", age: 30, address: "上海市浦东新区", department: "市场部" },
  { id: 3, name: "王五", age: 28, address: "广州市天河区", department: "销售部" },
  { id: 4, name: "赵六", age: 35, address: "深圳市南山区", department: "人事部" },
  { id: 5, name: "钱七", age: 22, address: "杭州市西湖区", department: "财务部" },
]);

// 列配置
const columns = [
  { prop: "id", label: "ID", width: 80, align: "center" },
  { prop: "name", label: "姓名", width: 120 },
  { prop: "age", label: "年龄", width: 80, align: "center" },
  { prop: "department", label: "部门", width: 120 },
  { prop: "address", label: "地址" },
  {
    prop: "action",
    label: "操作",
    width: 100,
    align: "center",
    slotName: "action",
  },
];

// 选中行
const selectedRowKeys = ref([]);

// 选中变化事件
function handleSelectionChange(selection) {
  selectedRowKeys.value = selection.map(item => item.id);
  ElMessage({ message: `选中了 ${selection.length} 行`, type: "info" });
}

// 删除按钮点击事件
function handleDelete(row) {
  const index = tableData.value.findIndex(item => item.id === row.id);
  if (index !== -1) {
    tableData.value.splice(index, 1);
    ElMessage.success(`已删除行: ${row.name}`);
  }
}
</script>

<style scoped></style>

隐藏源代码

事件列表

SunlightTable 组件支持多种事件，用于响应表格的各种操作：

事件名	参数	说明
update:currentPage	page: number	当前页码变化
update:pageSize	size: number	每页条数变化
update:hideColumns	hideColumns: (string | number)[]	隐藏列变化
update:searchParam	searchParam: Record<string, any>	搜索参数更新
update:visibleSearchColumns	visibleSearchColumns: string[]	可见搜索列更新
selection-change	selection: any[]	选中行变化
row-click	row: any, column: any, event: Event	行点击
row-dblclick	row: any, column: any, event: Event	行双击
pagination	data: { page: number; limit: number }	分页变化
export	columns?: string[]	导出
density-change	density: string	密度变化
custom-button-click	key: string	自定义按钮点击
search	searchParam: Record<string, any>	搜索
open-settings	-	打开设置
open-dynamic-columns	-	打开动态列
refresh	-	刷新

方法调用

SunlightTable 组件暴露了一些方法，可以通过 ref 调用。

示例

方法调用示例

点击下面的按钮，演示 SunlightTable 组件的方法调用功能

<template>
  <div>
    <h3>方法调用示例</h3>
    <p>点击下面的按钮，演示 SunlightTable 组件的方法调用功能</p>

    <div class="button-group" style="margin-bottom: 16px">
      <el-button @click="clearSelection">清空选择</el-button>
      <el-button @click="toggleRowSelection">切换第一行选择</el-button>
      <el-button @click="toggleAllSelection">切换全选</el-button>
      <el-button type="primary" @click="setCurrentRow">设置当前行</el-button>
      <el-button @click="clearSort">清空排序</el-button>
      <el-button type="warning" @click="doLayout">重新布局</el-button>
    </div>

    <SunlightTable
      ref="tableRef"
      :data="tableData"
      :columns="columns"
      :show-selection="true"
      :highlight-current-row="true"
      :row-class-name="rowClassName"
    />
  </div>
</template>

<script setup>
import { ref } from "vue";
import { SunlightTable } from "sunlight-ui";
import { ElMessage } from "element-plus";

// 表格数据
const tableData = ref([
  { id: 1, name: "张三", age: 25, address: "北京市朝阳区", department: "技术部" },
  { id: 2, name: "李四", age: 30, address: "上海市浦东新区", department: "市场部" },
  { id: 3, name: "王五", age: 28, address: "广州市天河区", department: "销售部" },
  { id: 4, name: "赵六", age: 35, address: "深圳市南山区", department: "人事部" },
  { id: 5, name: "钱七", age: 22, address: "杭州市西湖区", department: "财务部" },
]);

// 列配置
const columns = [
  { prop: "id", label: "ID", width: 80, align: "center", sortable: true },
  { prop: "name", label: "姓名", width: 120, sortable: true },
  { prop: "age", label: "年龄", width: 80, align: "center", sortable: true },
  { prop: "department", label: "部门", width: 120 },
  { prop: "address", label: "地址" },
];

// 表格引用
const tableRef = ref(null);

// 状态信息
const currentRowName = ref("无");
const tableStatus = ref("就绪");

// 行样式函数
function rowClassName({ row, rowIndex }) {
  if (row.id === 1) {
    return "current-row-highlight";
  }
  return "";
}

// 清空选择
function clearSelection() {
  tableRef.value?.clearSelection();
  ElMessage.success("已清空选择");
}

// 切换第一行选择
function toggleRowSelection() {
  if (tableData.value.length > 0) {
    tableRef.value?.toggleRowSelection(tableData.value[0]);
    ElMessage.success("已切换第一行选择状态");
  }
}

// 切换全选
function toggleAllSelection() {
  tableRef.value?.toggleAllSelection();
  ElMessage.success("已切换全选状态");
}

// 设置当前行
function setCurrentRow() {
  if (tableData.value.length > 0) {
    const firstRow = tableData.value[0];
    tableRef.value?.setCurrentRow(firstRow);
    currentRowName.value = firstRow.name;
    tableStatus.value = "已设置当前行";
    ElMessage.success(`已设置当前行: ${firstRow.name}`);

    // 添加视觉反馈，临时高亮第一行
    const tableEl = tableRef.value?.tableRef?.$el;
    if (tableEl) {
      const rows = tableEl.querySelectorAll(".el-table__row");
      if (rows.length > 0) {
        const firstRowEl = rows[0];
        const originalBg = firstRowEl.style.backgroundColor;
        firstRowEl.style.backgroundColor = "#ecf5ff";
        setTimeout(() => {
          firstRowEl.style.backgroundColor = originalBg;
        }, 1500);
      }
    }
  }
}

// 清空排序
function clearSort() {
  tableRef.value?.clearSort();
  tableStatus.value = "已清空排序";
  ElMessage.success("已清空排序");
}

// 重新布局
function doLayout() {
  tableRef.value?.doLayout();
  tableStatus.value = "已重新布局";
  ElMessage.success("已重新布局");

  // 添加视觉反馈，临时改变表格边框颜色
  const tableEl = tableRef.value?.tableRef?.$el;
  if (tableEl) {
    const originalBorder = tableEl.style.border;
    tableEl.style.border = "2px solid #409eff";
    setTimeout(() => {
      tableEl.style.border = originalBorder;
    }, 1000);
  }

  // 模拟表格尺寸变化，增强视觉效果
  const tableContainer = tableEl?.parentElement;
  if (tableContainer) {
    const originalPadding = tableContainer.style.padding;
    tableContainer.style.padding = "10px";
    setTimeout(() => {
      tableContainer.style.padding = originalPadding;
    }, 500);
  }
}
</script>

<style scoped>
.button-group {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.current-row-highlight {
  background-color: #ecf5ff !important;
}

/* 增强当前行高亮效果 */
:deep(.el-table__row.current-row) {
  background-color: #ecf5ff !important;
}
</style>

隐藏源代码

方法列表

方法名	参数	返回值	说明
tableRef	-	-	表格实例引用
clearSelection	-	-	清空选择
toggleRowSelection	row: any, selected?: boolean	-	切换行选择状态
toggleAllSelection	-	-	切换全选状态
setCurrentRow	row: any	-	设置当前行
clearSort	-	-	清空排序
clearFilter	columnKey?: string	-	清空过滤
doLayout	-	-	重新布局
sort	prop: string, order: string	-	排序

表格单选

单选功能。

示例

共 10 条

• 1

前往

页

<template>
  <div>
    <SunlightTable
      :data="tableData"
      :columns="columns"
      :show-toolbar="false"
      :show-pagination="true"
      v-model:current-page="currentPage"
      v-model:page-size="pageSize"
      :total="total"
    >
      <template #radio="{ row }">
        <el-radio :model-value="selectedId" :label="row.id" @change="handleSelect(row)">
          <span></span>
        </el-radio>
      </template>
    </SunlightTable>
  </div>
</template>

<script setup>
import { ref, watch } from "vue";
import { ElMessage } from "element-plus";

const selectedId = ref();
const selectedRow = ref(null);

// 处理单选选择
function handleSelect(row) {
  selectedId.value = row.id;
  selectedRow.value = row;
  ElMessage.success(`已选择: ${row.name}`);
  console.log("选中行：", row);
}

// 直接定义10条模拟数据
const tableData = ref([
  { id: 1, name: "张三", age: 25, city: "北京", department: "技术部", position: "员工", salary: 15000, status: "在职" },
  { id: 2, name: "李四", age: 28, city: "上海", department: "市场部", position: "主管", salary: 20000, status: "在职" },
  { id: 3, name: "王五", age: 30, city: "广州", department: "销售部", position: "经理", salary: 25000, status: "在职" },
  { id: 4, name: "赵六", age: 26, city: "深圳", department: "人事部", position: "员工", salary: 12000, status: "试用期" },
  { id: 5, name: "刘七", age: 32, city: "杭州", department: "财务部", position: "主管", salary: 18000, status: "在职" },
  { id: 6, name: "孙八", age: 27, city: "南京", department: "技术部", position: "员工", salary: 13000, status: "在职" },
  { id: 7, name: "周九", age: 29, city: "武汉", department: "市场部", position: "经理", salary: 22000, status: "休假中" },
  { id: 8, name: "吴十", age: 24, city: "成都", department: "销售部", position: "员工", salary: 10000, status: "试用期" },
  { id: 9, name: "郑一", age: 31, city: "西安", department: "技术部", position: "主管", salary: 19000, status: "在职" },
  { id: 10, name: "王二", age: 28, city: "重庆", department: "财务部", position: "员工", salary: 14000, status: "在职" }
]);

const currentPage = ref(1);
const pageSize = ref(10);
const total = ref(10);

const columns = [
  {
    prop: "radio",
    label: "选择",
    width: 60,
    slotName: "radio",
    align: "center",
  },
  { prop: "id", label: "ID" },
  { prop: "name", label: "姓名" },
  { prop: "age", label: "年龄" },
  { prop: "city", label: "城市" },
  { prop: "department", label: "部门" },
  { prop: "position", label: "职位" },
  { prop: "salary", label: "薪资" },
  { prop: "status", label: "状态" },
];

// 加载数据的方法
const loadData = () => {
  // 直接使用静态数据，无需异步加载
  total.value = tableData.value.length;
};

watch([currentPage, pageSize], () => {
  loadData();
});

loadData();
</script>

<style scoped>
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.selected-info {
  margin-top: 20px;
  padding: 15px;
  background-color: #f5f7fa;
  border-radius: 4px;
}

.selected-info p {
  margin: 5px 0;
}
</style>

隐藏源代码

核心代码

<template>
  <SunlightTable :data="tableData" :columns="columns">
    <!-- 单选列插槽 -->
    <template #radio="{ row }">
      <el-radio :model-value="selectedId" :label="row.id" @change="handleSelect(row)">
        <span></span>
      </el-radio>
    </template>
  </SunlightTable>
</template>

<script setup>
const selectedId = ref();
const selectedRow = ref(null);

// 处理单选选择
function handleSelect(row) {
  selectedId.value = row.id;
  selectedRow.value = row;
}

const columns = [
  {
    prop: "radio",
    label: "选择",
    width: 60,
    slotName: "radio",
    align: "center",
  },
  // 其他列配置
];
</script>

分页多选与配置功能

分页、多选与配置功能的组合使用，包含工具栏配置、列配置、密度切换等功能。

示例

• 默认
• 中等
• 紧凑

暂无数据

共 30 条

• 1
• 2
• 3

前往

页

<template>
  <div>
    <!-- :show-pagination="true"  开启分页多选 -->
    <SunlightTable
      :data="tableData"
      :columns="columns"
      :toolbar-config="toolbarConfig"
      :show-pagination="true"
      :show-selection="true"
      v-model:current-page="currentPage"
      v-model:page-size="pageSize"
      v-model:hide-columns="hideColumns"
      :selected-row-keys="selectedRowKeys"
      :total="total"
      @selection-change="handleSelectionChange"
      @refresh="handleRefresh"
      @custom-button-click="handleCustomButtonClick"
    />
  </div>
</template>

<script setup>
import { ref, reactive, watch } from "vue";
import { SunlightTable } from "sunlight-ui";
import { ElMessage } from "element-plus";

const toolbarConfig = reactive({
  showDensity: true, // 显示密度切换
  showColumnConfig: true, // 显示列配置
  showRefresh: true, // 显示刷新按钮
  customButtons: [
    {
      key: "edit",
      label: "编辑",
      icon: "Edit",
      type: "primary",
      position: "left",
    },
    {
      key: "delete",
      label: "删除",
      icon: "Delete",
      type: "danger",
      position: "right",
    },
    {
      key: "export",
      label: "导出",
      icon: "Download",
      type: "success",
      position: "right",
    },
  ],
});

function handleRefresh() {
  loadData();
}

function handleCustomButtonClick(key) {
  console.log("点击了按钮:", key);
  if (key === "edit") {
    if (selectedRowKeys.value.length === 0) {
      ElMessage.warning("请先选择一行数据");
      return;
    }
    if (selectedRowKeys.value.length > 1) {
      ElMessage.warning("只能选择一行数据进行编辑");
      return;
    }
    const selectedRow = tableData.value.find(row => row.id === selectedRowKeys.value[0]);
    ElMessage.info(`编辑: ${selectedRow.name}`);
  } else if (key === "delete") {
    if (selectedRowKeys.value.length === 0) {
      ElMessage.warning("请先选择要删除的数据");
      return;
    }
    ElMessage.success(`已删除 ${selectedRowKeys.value.length} 条数据`);
    selectedRowKeys.value = [];
  } else if (key === "export") {
    if (selectedRowKeys.value.length === 0) {
      ElMessage.warning("请先选择要导出的数据");
      return;
    }
    const selectedRows = tableData.value.filter(row => selectedRowKeys.value.includes(row.id));
    console.log("导出数据:", selectedRows);
    ElMessage.success(`导出 ${selectedRows.length} 条数据`);
  }
}

function handleSelectionChange(selection) {
  selectedRowKeys.value = selection.map(row => row.id);
  console.log("选中的行:", selection);
  console.log("选中行的 ID:", selectedRowKeys.value);
  ElMessage.success(`已选择 ${selectedRowKeys.value.length} 行数据`);
}

const tableData = ref([]);
const currentPage = ref(1);
const pageSize = ref(10);
const total = ref(30);
const hideColumns = ref([]);
const selectedRowKeys = ref([]);

const columns = [
  { prop: "id", label: "ID", width: 80 },
  { prop: "name", label: "姓名" },
  { prop: "age", label: "年龄", width: 80 },
  { prop: "city", label: "城市" },
  { prop: "department", label: "部门" },
  { prop: "position", label: "职位" },
  { prop: "salary", label: "薪资", width: 100 },
  { prop: "status", label: "状态", width: 100 },
  { prop: "phone", label: "手机号", width: 130 },
  { prop: "joinDate", label: "入职日期", width: 120 },
];

const allData = [
  {
    id: 1,
    name: "张伟",
    age: 25,
    city: "北京",
    department: "技术部",
    position: "员工",
    salary: 15000,
    status: "在职",
    phone: "13800138001",
    joinDate: "2023-01-01",
  },
  {
    id: 2,
    name: "李芳",
    age: 28,
    city: "上海",
    department: "市场部",
    position: "主管",
    salary: 20000,
    status: "在职",
    phone: "13800138002",
    joinDate: "2023-01-02",
  },
  {
    id: 3,
    name: "王娜",
    age: 30,
    city: "广州",
    department: "销售部",
    position: "经理",
    salary: 25000,
    status: "在职",
    phone: "13800138003",
    joinDate: "2023-01-03",
  },
  {
    id: 4,
    name: "赵敏",
    age: 26,
    city: "深圳",
    department: "人事部",
    position: "员工",
    salary: 12000,
    status: "在职",
    phone: "13800138004",
    joinDate: "2023-01-04",
  },
  {
    id: 5,
    name: "刘伟",
    age: 32,
    city: "杭州",
    department: "财务部",
    position: "主管",
    salary: 18000,
    status: "在职",
    phone: "13800138005",
    joinDate: "2023-01-05",
  },
  {
    id: 6,
    name: "陈静",
    age: 27,
    city: "南京",
    department: "运营部",
    position: "员工",
    salary: 13000,
    status: "在职",
    phone: "13800138006",
    joinDate: "2023-01-06",
  },
  {
    id: 7,
    name: "杨强",
    age: 29,
    city: "武汉",
    department: "产品部",
    position: "经理",
    salary: 22000,
    status: "在职",
    phone: "13800138007",
    joinDate: "2023-01-07",
  },
  {
    id: 8,
    name: "黄磊",
    age: 24,
    city: "成都",
    department: "客服部",
    position: "员工",
    salary: 10000,
    status: "试用期",
    phone: "13800138008",
    joinDate: "2023-01-08",
  },
  {
    id: 9,
    name: "周军",
    age: 31,
    city: "西安",
    department: "技术部",
    position: "主管",
    salary: 19000,
    status: "在职",
    phone: "13800138009",
    joinDate: "2023-01-09",
  },
  {
    id: 10,
    name: "吴洋",
    age: 26,
    city: "重庆",
    department: "市场部",
    position: "员工",
    salary: 14000,
    status: "在职",
    phone: "13800138010",
    joinDate: "2023-01-10",
  },
  {
    id: 11,
    name: "徐勇",
    age: 33,
    city: "苏州",
    department: "销售部",
    position: "总监",
    salary: 30000,
    status: "在职",
    phone: "13800138011",
    joinDate: "2023-01-11",
  },
  {
    id: 12,
    name: "孙艳",
    age: 28,
    city: "天津",
    department: "人事部",
    position: "主管",
    salary: 16000,
    status: "在职",
    phone: "13800138012",
    joinDate: "2023-01-12",
  },
  {
    id: 13,
    name: "马杰",
    age: 29,
    city: "长沙",
    department: "财务部",
    position: "经理",
    salary: 23000,
    status: "在职",
    phone: "13800138013",
    joinDate: "2023-01-13",
  },
  {
    id: 14,
    name: "朱娟",
    age: 27,
    city: "郑州",
    department: "运营部",
    position: "主管",
    salary: 17000,
    status: "在职",
    phone: "13800138014",
    joinDate: "2023-01-14",
  },
  {
    id: 15,
    name: "胡涛",
    age: 30,
    city: "青岛",
    department: "产品部",
    position: "总监",
    salary: 28000,
    status: "在职",
    phone: "13800138015",
    joinDate: "2023-01-15",
  },
  {
    id: 16,
    name: "郭霞",
    age: 25,
    city: "北京",
    department: "客服部",
    position: "员工",
    salary: 11000,
    status: "试用期",
    phone: "13800138016",
    joinDate: "2023-01-16",
  },
  {
    id: 17,
    name: "林明",
    age: 31,
    city: "上海",
    department: "技术部",
    position: "经理",
    salary: 24000,
    status: "在职",
    phone: "13800138017",
    joinDate: "2023-01-17",
  },
  {
    id: 18,
    name: "何秀英",
    age: 32,
    city: "广州",
    department: "市场部",
    position: "总监",
    salary: 29000,
    status: "在职",
    phone: "13800138018",
    joinDate: "2023-01-18",
  },
  {
    id: 19,
    name: "高华",
    age: 28,
    city: "深圳",
    department: "销售部",
    position: "主管",
    salary: 18000,
    status: "在职",
    phone: "13800138019",
    joinDate: "2023-01-19",
  },
  {
    id: 20,
    name: "罗平",
    age: 26,
    city: "杭州",
    department: "技术部",
    position: "员工",
    salary: 14000,
    status: "试用期",
    phone: "13800138020",
    joinDate: "2023-01-20",
  },
  {
    id: 21,
    name: "张志",
    age: 29,
    city: "南京",
    department: "财务部",
    position: "员工",
    salary: 13000,
    status: "在职",
    phone: "13800138021",
    joinDate: "2023-01-21",
  },
  {
    id: 22,
    name: "王丽",
    age: 27,
    city: "武汉",
    department: "运营部",
    position: "员工",
    salary: 12000,
    status: "在职",
    phone: "13800138022",
    joinDate: "2023-01-22",
  },
  {
    id: 23,
    name: "李强",
    age: 30,
    city: "成都",
    department: "产品部",
    position: "主管",
    salary: 19000,
    status: "在职",
    phone: "13800138023",
    joinDate: "2023-01-23",
  },
  {
    id: 24,
    name: "赵静",
    age: 26,
    city: "西安",
    department: "人事部",
    position: "员工",
    salary: 11000,
    status: "试用期",
    phone: "13800138024",
    joinDate: "2023-01-24",
  },
  {
    id: 25,
    name: "刘杰",
    age: 31,
    city: "重庆",
    department: "技术部",
    position: "经理",
    salary: 23000,
    status: "在职",
    phone: "13800138025",
    joinDate: "2023-01-25",
  },
  {
    id: 26,
    name: "陈丽",
    age: 28,
    city: "苏州",
    department: "市场部",
    position: "主管",
    salary: 17000,
    status: "在职",
    phone: "13800138026",
    joinDate: "2023-01-26",
  },
  {
    id: 27,
    name: "杨磊",
    age: 29,
    city: "天津",
    department: "销售部",
    position: "员工",
    salary: 14000,
    status: "离职",
    phone: "13800138027",
    joinDate: "2023-01-27",
  },
  {
    id: 28,
    name: "黄军",
    age: 32,
    city: "长沙",
    department: "技术部",
    position: "总监",
    salary: 32000,
    status: "在职",
    phone: "13800138028",
    joinDate: "2023-01-28",
  },
  {
    id: 29,
    name: "周敏",
    age: 26,
    city: "郑州",
    department: "客服部",
    position: "员工",
    salary: 10000,
    status: "试用期",
    phone: "13800138029",
    joinDate: "2023-01-29",
  },
  {
    id: 30,
    name: "吴芳",
    age: 27,
    city: "青岛",
    department: "产品部",
    position: "员工",
    salary: 13000,
    status: "在职",
    phone: "13800138030",
    joinDate: "2023-01-30",
  },
];

function fetchTableData(page = 1, pageSizeVal = 10) {
  return new Promise(resolve => {
    setTimeout(() => {
      const start = (page - 1) * pageSizeVal;
      const end = start + pageSizeVal;
      resolve({
        data: allData.slice(start, end),
        total: allData.length,
      });
    }, 300);
  });
}

const loadData = async () => {
  const result = await fetchTableData(currentPage.value, pageSize.value);
  tableData.value = result.data;
  total.value = result.total;
};

watch([currentPage, pageSize], () => {
  loadData();
});

loadData();
</script>

隐藏源代码

核心配置

参数	说明	类型	默认值
showPagination	是否显示分页	boolean	false
currentPage	当前页码	number	1
pageSize	每页条数	number	10
total	总条数	number	undefined
showSelection	是否显示多选框	boolean	false
selectedRowKeys	选中行的 key 数组	(string | number)[]	undefined
hideColumns	隐藏列	(string | number)[]	[]
toolbarConfig	工具栏配置	Object	undefined

开启分页多选的配置

要开启分页多选功能，需要同时设置以下两个属性：

属性	配置值	说明
showPagination	true	开启分页功能
showSelection	true	开启多选框功能

示例：开启分页多选的完整配置

<template>
  <SunlightTable
    :data="tableData"
    :columns="columns"
    :toolbar-config="toolbarConfig"
    :show-pagination="true" <!-- 开启分页 -->
    :show-selection="true" <!-- 开启多选 -->
    v-model:current-page="currentPage"
    v-model:page-size="pageSize"
    :total="total"
    :selected-row-keys="selectedRowKeys"
    @selection-change="handleSelectionChange"
  />
</template>

<script setup>
import { ref, reactive } from "vue";
import { SunlightTable } from "sunlight-ui";

const tableData = ref([]);
const currentPage = ref(1);
const pageSize = ref(10);
const total = ref(30); // 总数据量
const selectedRowKeys = ref([]); // 选中行的ID数组

// 处理选择变化
const handleSelectionChange = (selection) => {
  selectedRowKeys.value = selection.map(row => row.id);
  console.log("选中的行:", selection);
};

// 列配置
const columns = [
  { prop: "id", label: "ID", width: 80 },
  { prop: "name", label: "姓名" },
  { prop: "age", label: "年龄", width: 80 },
  { prop: "city", label: "城市" },
  { prop: "department", label: "部门" },
  { prop: "position", label: "职位" },
  { prop: "salary", label: "薪资", width: 100 },
  { prop: "status", label: "状态", width: 100 },
  { prop: "phone", label: "手机号", width: 130 },
  { prop: "joinDate", label: "入职日期", width: 120 },
];

// 工具栏配置
const toolbarConfig = reactive({
  showDensity: true,     // 显示密度切换
  showColumnConfig: true, // 显示列配置
  showRefresh: true,      // 显示刷新按钮
  customButtons: [        // 自定义按钮
    {
      key: "edit",
      label: "编辑",
      icon: "Edit",
      type: "primary",
      position: "left"
    },
    {
      key: "delete",
      label: "删除",
      icon: "Delete",
      type: "danger",
      position: "right"
    },
    {
      key: "export",
      label: "导出",
      icon: "Download",
      type: "success",
      position: "right"
    }
  ]
});

// 加载数据的方法
const loadData = async () => {
  // 模拟异步加载数据
  const result = await fetchTableData(currentPage.value, pageSize.value);
  tableData.value = result.data;
  total.value = result.total;
};

// 初始化加载数据
loadData();
</script>

事件处理

事件名	参数	说明
selection-change	selection: any[]	选中行变化
refresh	-	刷新
custom-button-click	key: string	自定义按钮点击

完整示例

以下是一个完整的 SunlightTable 使用示例，包含了所有基本功能：

示例

姓名

状态

请选择状态

部门

请选择部门

• 默认
• 中等
• 紧凑

共 8 条

• 1

前往

页

<template>
  <div>
    <SunlightTable
      ref="tableRef"
      :data="tableData"
      :columns="columns"
      :show-pagination="true"
      :current-page="currentPage"
      :page-size="pageSize"
      :total="total"
      :show-selection="true"
      v-model:selected-row-keys="selectedRowKeys"
      :search-columns="searchColumns"
      v-model:search-param="searchParam"
      :toolbar-config="toolbarConfig"
      :export-config="exportConfig"
      v-model:hide-columns="hideColumns"
      @pagination="handlePagination"
      @selection-change="handleSelectionChange"
      @search="handleSearch"
      @export="handleExport"
      @density-change="handleDensityChange"
      @custom-button-click="handleCustomButtonClick"
      @row-click="handleRowClick"
      @update:hide-columns="handleHideColumnsChange"
    />
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue';
import { SunlightTable } from 'sunlight-ui';
import { ElMessage } from 'element-plus';

// 表格引用
const tableRef = ref<any>(null);

// 原始数据
const originalData = ref([
  {
    id: 1,
    name: '张三',
    age: 25,
    gender: 'male',
    status: 'active',
    department: 'tech',
    hireDate: '2023-01-01',
  },
  {
    id: 2,
    name: '李四',
    age: 30,
    gender: 'female',
    status: 'inactive',
    department: 'product',
    hireDate: '2023-02-01',
  },
  {
    id: 3,
    name: '王五',
    age: 28,
    gender: 'male',
    status: 'active',
    department: 'design',
    hireDate: '2023-03-01',
  },
  {
    id: 4,
    name: '赵六',
    age: 35,
    gender: 'male',
    status: 'active',
    department: 'tech',
    hireDate: '2023-04-01',
  },
  {
    id: 5,
    name: '孙七',
    age: 22,
    gender: 'female',
    status: 'inactive',
    department: 'product',
    hireDate: '2023-05-01',
  },
  {
    id: 6,
    name: '周八',
    age: 29,
    gender: 'male',
    status: 'active',
    department: 'design',
    hireDate: '2023-06-01',
  },
  {
    id: 7,
    name: '吴九',
    age: 31,
    gender: 'female',
    status: 'active',
    department: 'tech',
    hireDate: '2023-07-01',
  },
  {
    id: 8,
    name: '郑十',
    age: 26,
    gender: 'male',
    status: 'inactive',
    department: 'product',
    hireDate: '2023-08-01',
  },
]);

// 分页配置
const currentPage = ref(1);
const pageSize = ref(10);
const total = ref(originalData.value.length);

// 选中行配置
const selectedRowKeys = ref<(string | number)[]>([]);

// 搜索参数
const searchParam = ref({});

// 隐藏列配置
const hideColumns = ref<(string | number)[]>([]);

// 过滤后的数据
const tableData = computed(() => {
  let result = [...originalData.value];
  
  // 根据搜索参数过滤
  if (searchParam.value.name) {
    result = result.filter(item => 
      item.name.includes(searchParam.value.name)
    );
  }
  
  if (searchParam.value.status) {
    result = result.filter(item => 
      item.status === searchParam.value.status
    );
  }
  
  if (searchParam.value.department) {
    result = result.filter(item => 
      item.department === searchParam.value.department
    );
  }
  
  total.value = result.length;
  
  // 分页处理
  const start = (currentPage.value - 1) * pageSize.value;
  const end = start + pageSize.value;
  return result.slice(start, end);
});

// 列配置
const columns = [
  { prop: 'id', label: 'ID', width: 80, align: 'center' },
  { prop: 'name', label: '姓名', width: 120 },
  { prop: 'age', label: '年龄', width: 80, align: 'center' },
  { prop: 'gender', label: '性别', width: 100, align: 'center' },
  { prop: 'status', label: '状态', width: 100, align: 'center' },
  { prop: 'department', label: '部门', width: 120 },
  { prop: 'hireDate', label: '入职日期', width: 150, align: 'center' },
];

// 搜索表单配置
const searchColumns = [
  {
    prop: 'name',
    label: '姓名',
    type: 'input',
    placeholder: '请输入姓名',
    span: 6,
  },
  {
    prop: 'status',
    label: '状态',
    type: 'select',
    placeholder: '请选择状态',
    options: [
      { label: '激活', value: 'active' },
      { label: '禁用', value: 'inactive' },
    ],
    span: 6,
  },
  {
    prop: 'department',
    label: '部门',
    type: 'select',
    placeholder: '请选择部门',
    options: [
      { label: '技术部', value: 'tech' },
      { label: '产品部', value: 'product' },
      { label: '设计部', value: 'design' },
    ],
    span: 6,
  },
];

// 工具栏配置
const toolbarConfig = {
  showDensity: true,
  showExport: true,
  showColumnConfig: true,
  showRefresh: true,
  customButtons: [
    {
      key: 'add',
      label: '新增',
      type: 'primary',
      icon: 'Plus',
      position: 'left',
    },
    {
      key: 'delete',
      label: '删除',
      type: 'danger',
      icon: 'Delete',
      position: 'left',
    },
  ],
};

// 导出配置
const exportConfig = {
  enableColumnSelection: true,
  defaultExportColumns: ['id', 'name', 'age', 'department'],
};

// 分页处理
function handlePagination(data: { page: number; limit: number }) {
  currentPage.value = data.page;
  pageSize.value = data.limit;
  ElMessage({
    message: `分页变化: 第 ${data.page} 页，每页 ${data.limit} 条`,
    type: 'success',
  });
}

// 选择变化处理
function handleSelectionChange(selection: any[]) {
  selectedRowKeys.value = selection.map(item => item.id);
  ElMessage({
    message: `选中了 ${selection.length} 行数据`,
    type: 'success',
  });
}

// 搜索处理
function handleSearch(params: Record<string, any>) {
  ElMessage({
    message: `搜索参数: ${JSON.stringify(params)}`,
    type: 'success',
  });
}

// 导出处理
function handleExport(columns?: string[]) {
  ElMessage({
    message: `导出列: ${columns?.join(', ') || '所有列'}`,
    type: 'success',
  });
}

// 密度变化处理
function handleDensityChange(density: string) {
  ElMessage({
    message: `密度变化: ${density}`,
    type: 'success',
  });
}

// 自定义按钮点击处理
function handleCustomButtonClick(key: string) {
  ElMessage({
    message: `点击自定义按钮: ${key}`,
    type: 'success',
  });
}

// 行点击处理
function handleRowClick(row: any, column: any, event: Event) {
  ElMessage({
    message: `点击行: ${row.name}`,
    type: 'success',
  });
}

// 隐藏列变化处理
function handleHideColumnsChange(hideColumns: (string | number)[]) {
  ElMessage({
    message: `隐藏列变化: ${hideColumns.join(', ')}`,
    type: 'success',
  });
}
</script>

隐藏源代码

完整示例包含了 SunlightTable 组件的所有基本功能，你可以根据实际需求进行修改和扩展。