jeecgboot vue3 useTable操作栏固定

在使用 Vue3 和 JeecgBoot 开发时，如果您想要实现操作栏固定的功能，可以尝试以下步骤：

1. 安装 element-plus 和 @vueuse/core，可以使用 npm 或 yarn 安装。

2. 在代码中导入需要的组件和方法：

import { useTable, useColumns, useSortBy, usePagination } from '@vueuse/table'
import { defineComponent } from 'vue'
import { ElButton } from 'element-plus'

3. 在组件中设置表格的数据和列信息：

export default defineComponent({
  setup() {
    const { columns, rows } = useTable(
      data.value, // 表格数据
      useColumns(columns.value), // 表格列信息
      useSortBy(), // 排序
      usePagination() // 分页
    )

    // 定义表格列信息
    const columns = ref([
      { key: 'name', label: '姓名' },
      { key: 'age', label: '年龄' },
      { key: 'address', label: '地址' },
      {
        key: 'action',
        label: '操作',
        actions: {
          view: {
            label: '查看',
            icon: 'el-icon-view',
            onClick: (row) => console.log(row)
          },
          edit: {
            label: '编辑',
            icon: 'el-icon-edit',
            onClick: (row) => console.log(row)
          },
          delete: {
            label: '删除',
            icon: 'el-icon-delete',
            onClick: (row) => console.log(row)
          }
        }
      }
    ])

    return {
      columns,
      rows
    }
  }
})

4. 在模板中渲染表格：

<template>
  <div>
    <el-table :data="rows">
      <el-table-column v-for="column in columns" :key="column.key" :label="column.label">
        <template #default="{ row }">
          <span v-if="!column.actions">{{ row[column.key] }}</span>
          <span v-else>
            <el-button
              v-for="(action, key) in column.actions"
              :key="key"
              :icon="action.icon"
              @click="action.onClick(row)"
            >
              {{ action.label }}
            </el-button>
          </span>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

5. 在 CSS 中设置操作栏固定：

.el-table__fixed-right .el-table__fixed-body-wrapper {
  overflow: visible;
}

.el-table__fixed-right .el-table__fixed-body-wrapper .el-table__body {
  overflow: visible;
}

.el-table__fixed-right .el-table__fixed-right-patch {
  display: none;
}

.el-table__fixed-right .el-table__fixed-body-wrapper .el-table__fixed {
  position: sticky;
  right: 0;
}

以上步骤可以实现固定操作栏的功能，您可以根据自己的需求进行调整和修改。