TableActions 表格操作按钮

用于表中操作列的按钮组件，使用配置式的属性。

使用方法

<script lang="ts" setup>
  const columns = [
    { prop: 'actions', slots:{default: 'actions'}}  // 操作列使用actions插槽
  ]
  const data = [
    { id: 1, name: 'John Doe' },
    { id: 2, name: 'Jane Smith' }
  ]

  /**
   * 操作列的按钮被点击事件
   * @param row 表格行数据
   * @param key 当前按钮的标识
   */
  function onActionClick({row, key}) {
    switch(key) {
      case "edit":
        console.log('编辑按钮被单击:', row);
        break;
      case "delete":
        console.log("删除按钮被单击", row)
        break;
    }
  }
</script>
<template>
  <Protable :columns="columns" :data="data">
    <template #actions="{row}">
      <TableActions
        :row="row"
        :buttons="['edit', 'delete']"
        @click="onActionClick"
      />
    </template>
  </Protable>
</template>

属性

属性名	类型	默认值	描述
row	Recordable	-	当前行数据
buttons	Array<((row: T) => DefaultActionKey|TableActionButton)| DefaultActionKey| TableActionButton >	-	按钮列表，支持edit,delete，view等预设按钮
buttonType	icon | text | icon-text	-	按钮的类型，选择展示图标或者文字
type	"default" | "success" | "primary" | "warning" | "info" | "danger"	"primary"	按钮的默认样式(参考ElLink的type属性)
underline	"always" | "never"| "hover"	"hover"	下划线样式，参考ElLink的underline属性

按钮定义

按钮配置是一个数组，或者一个返回数组的函数（根据每一行渲染不同的操作按钮）。数组的每个成员可以是预设按钮的key，或者一个完整的按钮定义对象。

DefaultActionKey

预设按钮的key有：edit（修改）、 delete(删除) 、 detail(详情) 。

下面是预设的按钮定义

// 预设的按钮
const defaultActionKeys = {
  edit: {
    key: 'edit',
    icon: 'ep:edit-pen',
    title: '修改',
    text: '修改',
  } satisfies TableActionButton,
  delete: {
    key: 'delete',
    icon: 'ep:delete',
    title: '删除',
    text: '删除',
    type: 'danger',
    confirm: '确定要删除这条数据吗？',
  } satisfies TableActionButton,
  detail: {
    key: 'detail',
    icon: 'ep:view',
    title: '详情',
  } satisfies TableActionButton,
}

如果要使用非预设按钮，参考下方配置：

const buttons = [
  "edit",  // 预设的修改按钮
  {
    key: 'custom',  // 按钮的唯一标识
    icon: 'ep:star-on', // 按钮图标，参考Iconify
    title: '按钮的提示标签',
    text: "按钮文字",
    confirm: "确定要执行。。。。", // 如果需要点击按钮后弹出一个确认操作的对话框，可以配置这个属性
  }
]

贡献者

Netfan

页面历史

最后编辑于 2 分钟前

查看完整历史

35bc3a9-添加表格操作按钮的文档