72 lines
1.6 KiB
Vue
72 lines
1.6 KiB
Vue
<template>
|
|
<div>
|
|
<BasicTable @register="registerTable" :searchInfo="searchInfo"> </BasicTable>
|
|
</div>
|
|
</template>
|
|
<script lang="ts" setup>
|
|
import { reactive, } from 'vue';
|
|
|
|
import { BasicTable, useTable, TableAction } from '@/components/Table';
|
|
import { getRoleListByPage, deleteRole } from '@/api/demo/system';
|
|
|
|
defineOptions({ name: 'RoleManagement' });
|
|
|
|
const searchInfo = reactive < Recordable > ({});
|
|
|
|
const [registerTable, { reload, getSelectRows, clearSelectedRowKeys }] = useTable({
|
|
// 表格名称
|
|
title: '角色列表',
|
|
// 获取数据的接口
|
|
api: getRoleListByPage,
|
|
// 表单列信息 BasicColumn[]
|
|
columns: [
|
|
{
|
|
title: '角色名称',
|
|
dataIndex: 'name',
|
|
width: 200,
|
|
},
|
|
{
|
|
title: '创建时间',
|
|
dataIndex: 'createTime',
|
|
width: 180,
|
|
},
|
|
],
|
|
rowKey: 'id',
|
|
formConfig: {
|
|
labelWidth: 120,
|
|
schemas: [{
|
|
field: 'key',
|
|
label: '关键字',
|
|
component: 'Input',
|
|
colProps: { span: 8 },
|
|
}],
|
|
},
|
|
// 使用搜索表单
|
|
useSearchForm: true,
|
|
// 显示表格设置工具
|
|
showTableSetting: false,
|
|
// 是否显示表格边框
|
|
bordered: true,
|
|
// 序号列
|
|
showIndexColumn: false,
|
|
// 勾选列
|
|
rowSelection: {//多选框
|
|
type: 'checkbox',
|
|
},
|
|
tableSetting: { fullScreen: true },
|
|
isCanResizeParent: true,
|
|
// 搜索
|
|
handleSearchInfoFn(info) {
|
|
return info;
|
|
},
|
|
});
|
|
|
|
function getRow() {
|
|
let rows = getSelectRows();
|
|
return rows
|
|
}
|
|
defineExpose({
|
|
getRow
|
|
})
|
|
|
|
</script> |