83 lines
2.0 KiB
Vue
83 lines
2.0 KiB
Vue
|
<template>
|
||
|
|
<div class='table-box'>
|
||
|
|
<ProTable
|
||
|
|
ref='proTable'
|
||
|
|
:columns='columns'
|
||
|
|
:data='logData'
|
||
|
|
@selection-change="handleSelectionChange"
|
||
|
|
type="selection"
|
||
|
|
>
|
||
|
|
<!-- 表格 header 按钮 -->
|
||
|
|
<template #tableHeader>
|
||
|
|
<el-button type='primary' :icon='Upload'>导出csv</el-button>
|
||
|
|
</template>
|
||
|
|
</ProTable>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</template>
|
||
|
|
<script setup lang='tsx' name='useProTable'>
|
||
|
|
import TimeControl from '@/components/TimeControl/index.vue'; // 根据实际路径调整
|
||
|
|
import { defineComponent,ref ,reactive} from 'vue'
|
||
|
|
import {type Log } from '@/api/log/interface'
|
||
|
|
import ProTable from '@/components/ProTable/index.vue'
|
||
|
|
import {Upload} from '@element-plus/icons-vue'
|
||
|
|
import logDataList from '@/api/log/logData'
|
||
|
|
import type { ColumnProps, ProTableInstance } from '@/components/ProTable/interface'
|
||
|
|
let multipleSelection = ref<string[]>([]);
|
||
|
|
const logData = logDataList
|
||
|
|
|
||
|
|
// ProTable 实例
|
||
|
|
const proTable = ref<ProTableInstance>()
|
||
|
|
// 表格配置项
|
||
|
|
const columns = reactive<ColumnProps<Log.LogList>[]>([
|
||
|
|
{ type: 'selection', fixed: 'left', width: 50 },
|
||
|
|
{
|
||
|
|
prop: 'content',
|
||
|
|
label: '内容',
|
||
|
|
width: 600,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
prop: 'record_Time',
|
||
|
|
label: '记录时间',
|
||
|
|
width: 180,
|
||
|
|
search: {
|
||
|
|
// 自定义 search 显示内容
|
||
|
|
render: ({ searchParam }) => {
|
||
|
|
return (
|
||
|
|
<div class='flx-center'>
|
||
|
|
<TimeControl/>
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
},
|
||
|
|
},
|
||
|
|
},
|
||
|
|
{
|
||
|
|
prop: 'user',
|
||
|
|
label: '操作用户',
|
||
|
|
search: { el: 'select', props: { filterable: true } },
|
||
|
|
},
|
||
|
|
|
||
|
|
{
|
||
|
|
prop: 'type',
|
||
|
|
label: '日志类型',
|
||
|
|
search: { el: 'select', props: { filterable: true } },
|
||
|
|
},
|
||
|
|
{
|
||
|
|
prop: 'level',
|
||
|
|
label: '日志等级',
|
||
|
|
search: { el: 'select', props: { filterable: true } },
|
||
|
|
},
|
||
|
|
])
|
||
|
|
|
||
|
|
//选中
|
||
|
|
// 处理选择变化
|
||
|
|
const handleSelectionChange = (selection:Log.LogList[]) => {
|
||
|
|
multipleSelection.value = selection.map(row => row.id); // 更新选中的行
|
||
|
|
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped>
|
||
|
|
|
||
|
|
</style>
|