<template>
|
<div class="table-box">
|
<ProTable ref="proTable" title="菜单列表" row-key="path" :indent="20" :columns="columns" :data="menuData">
|
<!-- 表格 header 按钮 -->
|
<template #tableHeader>
|
<el-button type="primary" :icon="CirclePlus">新增菜单 </el-button>
|
</template>
|
<!-- 菜单图标 -->
|
<template #icon="scope">
|
<el-icon :size="18">
|
<component :is="scope.row.meta.icon"></component>
|
</el-icon>
|
</template>
|
<!-- 菜单操作 -->
|
<template #operation>
|
<el-button type="primary" link :icon="EditPen"> 编辑 </el-button>
|
<el-button type="primary" link :icon="Delete"> 删除 </el-button>
|
</template>
|
</ProTable>
|
</div>
|
</template>
|
|
<script setup lang="ts" name="menuMange">
|
import { ref } from "vue";
|
import { ColumnProps } from "@/components/ProTable/interface";
|
import { Delete, EditPen, CirclePlus } from "@element-plus/icons-vue";
|
import authMenuList from "@/assets/json/authMenuList.json";
|
import ProTable from "@/components/ProTable/index.vue";
|
|
const proTable = ref();
|
|
const menuData = ref(authMenuList.data);
|
|
// 表格配置项
|
const columns: ColumnProps[] = [
|
{ prop: "meta.title", label: "菜单名称", align: "left", search: { el: "input" } },
|
{ prop: "meta.icon", label: "菜单图标" },
|
{ prop: "name", label: "菜单 name", search: { el: "input" } },
|
{ prop: "path", label: "菜单路径", width: 300, search: { el: "input" } },
|
{ prop: "component", label: "组件路径", width: 300 },
|
{ prop: "operation", label: "操作", width: 250, fixed: "right" }
|
];
|
</script>
|
