OperationColumn 操作列

表格操作列组件，自动生成编辑、删除等操作按钮，支持权限控制。

💡 使用场景：在 CURD 组件内部使用，通常无需手动引用。详见 CURD 组件。

基本用法

<template>
  <el-table :data="tableData">
    <el-table-column label="姓名" prop="name" />
    <el-table-column label="操作" width="200">
      <template #default="{ row }">
        <OperationColumn
          :buttons="buttons"
          :row="row"
          @click="handleClick"
        />
      </template>
    </el-table-column>
  </el-table>
</template>

<script setup lang="ts">
const buttons = [
  { name: 'edit', text: '编辑', type: 'primary' },
  { name: 'delete', text: '删除', type: 'danger' }
]

function handleClick(name: string, row: any) {
  if (name === 'edit') {
    // 编辑操作
  } else if (name === 'delete') {
    // 删除操作
  }
}
</script>

带权限控制

<script setup lang="ts">
const buttons = [
  { name: 'edit', text: '编辑', type: 'primary', perm: 'sys:user:edit' },
  { name: 'delete', text: '删除', type: 'danger', perm: 'sys:user:delete' }
]
</script>

Props

参数	说明	类型	默认值
buttons	按钮配置数组	Button[]	[]
row	当前行数据	object	-

Button 配置

参数	说明	类型	可选值
name	按钮标识	string	-
text	按钮文本	string	-
type	按钮类型	string	primary / success / warning / danger / info
icon	按钮图标	string	-
perm	权限标识	string	-
show	显示条件	(row) => boolean	-

Events

事件名	说明	回调参数
click	按钮点击时触发	(name: string, row: any)

功能特性

• ✅ 按钮权限控制
• ✅ 条件显示按钮
• ✅ 自定义按钮样式

相关链接

• CURD 快速开发
• 权限控制