fix Bug or add example

src/views/list/basicList/index.vue

@@ -5,6 +5,7 @@
         :request="loadDataTable"
         :row-key="row => row.id"
         ref="actionRef"
+        :actionColumn="actionColumn"
         @update:checked-row-keys="onCheckedRow"
     >
       <template #tableTitle>
@@ -17,9 +18,14 @@
           新建
         </n-button>
       </template>
+
       <template #toolbar>
         <n-button type="primary" @click="reloadTable">刷新数据</n-button>
       </template>
+
+      <template #action="{ record }">
+        <TableAction></TableAction>
+      </template>
     </BasicTable>
 
     <n-modal v-model:show="showModal" :show-icon="false" preset="dialog" title="新建">
@@ -57,10 +63,11 @@
 <script lang="ts">
 import { defineComponent, reactive, toRefs, ref, h } from 'vue'
 import { useMessage } from 'naive-ui'
-import { BasicTable } from '@/components/Table'
+import { BasicTable, TableAction } from '@/components/Table'
 import { getTableList } from '@/api/table/list'
 import { columns } from './columns'
 import { PlusOutlined } from '@vicons/antd'
+import { useRouter } from 'vue-router'
 
 const rules = {
   name: {
@@ -82,8 +89,9 @@ const rules = {
 }
 
 export default defineComponent({
-  components: { BasicTable, PlusOutlined },
+  components: { BasicTable, PlusOutlined, TableAction },
   setup() {
+    const router = useRouter()
     const formRef: any = ref(null)
     const message = useMessage()
     const actionRef = ref()
@@ -99,6 +107,62 @@ export default defineComponent({
         pageSize: 5,
         name: 'xiaoMa'
       },
+      actionColumn: {
+        width: 250,
+        title: '操作',
+        dataIndex: 'action',
+        fixed: 'right',
+        render(record) {
+          return h(
+              TableAction,
+              {
+                style: 'button',
+                actions: [
+                  {
+                    label: '删除',
+                    icon: 'ic:outline-delete-outline',
+                    onClick: handleDelete.bind(null, record),
+                    // 根据业务控制是否显示 isShow 和 auth 是并且关系
+                    ifShow: () => {
+                      return true;
+                    },
+                    // 根据权限控制是否显示: 有权限，会显示，支持多个
+                    auth: ['basic_list'],
+                  },
+                  {
+
+                    label: '编辑',
+                    onClick: handleEdit.bind(null, record),
+                    ifShow: () => {
+                      return true;
+                    },
+                    auth: ['basic_list'],
+                  },
+                ],
+                dropDownActions: [
+                  {
+                    label: '启用',
+                    key: 'enabled',
+                    // 根据业务控制是否显示: 非enable状态的不显示启用按钮
+                    ifShow: (record) => {
+                      return true;
+                    },
+                  },
+                  {
+                    label: '禁用',
+                    key: 'disabled',
+                    ifShow: () => {
+                      return true
+                    },
+                  }
+                ],
+                select:(key) => {
+                  message.info(`您点击了，${key} 按钮`)
+                }
+              }
+          )
+        }
+      },
     })
 
     function addTable() {
@@ -135,6 +199,21 @@ export default defineComponent({
       })
     }
 
+    function handleEdit(record: Recordable) {
+      console.log('点击了编辑', record);
+      router.push({ name: 'basic-info', params: { id: record.id } })
+    }
+
+    function handleDelete(record: Recordable) {
+      console.log('点击了删除', record);
+      message.info('点击了删除')
+    }
+
+    function handleOpen(record: Recordable) {
+      console.log('点击了启用', record);
+      message.info('点击了删除')
+    }
+
     return {
       ...toRefs(state),
       formRef,
@@ -145,7 +224,10 @@ export default defineComponent({
       loadDataTable,
       onCheckedRow,
       reloadTable,
-      addTable
+      addTable,
+      handleEdit,
+      handleDelete,
+      handleOpen
     }
   }
 })