|
@@ -21,7 +21,7 @@
|
|
|
<!-- 要使用`el-table`组件原有的属性,直接加在Table标签上即可 -->
|
|
<!-- 要使用`el-table`组件原有的属性,直接加在Table标签上即可 -->
|
|
|
<Table>
|
|
<Table>
|
|
|
<template #operate>
|
|
<template #operate>
|
|
|
- <el-table-column prop="operate" align="center" label="操作" min-width="150">
|
|
|
|
|
|
|
+ <el-table-column prop="operate" align="center" label="操作" min-width="210">
|
|
|
<template #default="scope">
|
|
<template #default="scope">
|
|
|
<el-button type="primary" size="small" @click="onEdit(scope.row)">编辑</el-button>
|
|
<el-button type="primary" size="small" @click="onEdit(scope.row)">编辑</el-button>
|
|
|
<el-button type="danger" size="small" @click="del(scope.row)">删除</el-button>
|
|
<el-button type="danger" size="small" @click="del(scope.row)">删除</el-button>
|
|
@@ -40,7 +40,7 @@
|
|
|
</template>
|
|
</template>
|
|
|
|
|
|
|
|
<script setup lang="ts">
|
|
<script setup lang="ts">
|
|
|
-import { onMounted, provide, useTemplateRef } from 'vue'
|
|
|
|
|
|
|
+import { provide, useTemplateRef } from 'vue'
|
|
|
import { cloneDeep } from 'lodash-es'
|
|
import { cloneDeep } from 'lodash-es'
|
|
|
import baTableClass from '/@/utils/baTable'
|
|
import baTableClass from '/@/utils/baTable'
|
|
|
import Table from '/@/components/table/index.vue'
|
|
import Table from '/@/components/table/index.vue'
|
|
@@ -123,90 +123,8 @@ const baTable = new baTableClass(
|
|
|
}
|
|
}
|
|
|
)
|
|
)
|
|
|
|
|
|
|
|
-// 设置假数据
|
|
|
|
|
-baTable.getData = () => {
|
|
|
|
|
- baTable.table.loading = true
|
|
|
|
|
- // 模拟异步请求
|
|
|
|
|
- return new Promise<void>((resolve) => {
|
|
|
|
|
- setTimeout(() => {
|
|
|
|
|
- // 根据筛选条件过滤数据
|
|
|
|
|
- let filteredData = [
|
|
|
|
|
- {
|
|
|
|
|
- id: 1,
|
|
|
|
|
- name: '张三',
|
|
|
|
|
- email: 'zhangsan@example.com',
|
|
|
|
|
- company: '聚德科技',
|
|
|
|
|
- status: '1',
|
|
|
|
|
- inviter: '李四',
|
|
|
|
|
- create_time: '2025-01-10 10:00:00',
|
|
|
|
|
- last_login_time: '2025-01-15 14:30:00',
|
|
|
|
|
- },
|
|
|
|
|
- {
|
|
|
|
|
- id: 2,
|
|
|
|
|
- name: '王五',
|
|
|
|
|
- email: 'wangwu@example.com',
|
|
|
|
|
- company: '棱镜科技',
|
|
|
|
|
- status: '1',
|
|
|
|
|
- inviter: '赵六',
|
|
|
|
|
- create_time: '2025-01-11 09:00:00',
|
|
|
|
|
- last_login_time: '2025-01-14 16:20:00',
|
|
|
|
|
- },
|
|
|
|
|
- {
|
|
|
|
|
- id: 3,
|
|
|
|
|
- name: '刘七',
|
|
|
|
|
- email: 'liuqi@example.com',
|
|
|
|
|
- company: '测试公司',
|
|
|
|
|
- status: '0',
|
|
|
|
|
- inviter: '张三',
|
|
|
|
|
- create_time: '2025-01-12 11:00:00',
|
|
|
|
|
- last_login_time: '2025-01-13 10:15:00',
|
|
|
|
|
- },
|
|
|
|
|
- {
|
|
|
|
|
- id: 4,
|
|
|
|
|
- name: '陈八',
|
|
|
|
|
- email: 'chenba@example.com',
|
|
|
|
|
- company: '示例企业',
|
|
|
|
|
- status: '1',
|
|
|
|
|
- inviter: '王五',
|
|
|
|
|
- create_time: '2025-01-13 14:00:00',
|
|
|
|
|
- last_login_time: '2025-01-15 09:45:00',
|
|
|
|
|
- },
|
|
|
|
|
- {
|
|
|
|
|
- id: 5,
|
|
|
|
|
- name: '周九',
|
|
|
|
|
- email: 'zhoujiu@example.com',
|
|
|
|
|
- company: '聚德科技',
|
|
|
|
|
- status: '1',
|
|
|
|
|
- inviter: '李四',
|
|
|
|
|
- create_time: '2025-01-14 08:30:00',
|
|
|
|
|
- last_login_time: '2025-01-15 11:20:00',
|
|
|
|
|
- },
|
|
|
|
|
- ]
|
|
|
|
|
-
|
|
|
|
|
- // 根据筛选条件过滤
|
|
|
|
|
- const nameFilter = baTable.table.filter?.name
|
|
|
|
|
- const statusFilter = baTable.table.filter?.status
|
|
|
|
|
-
|
|
|
|
|
- if (nameFilter) {
|
|
|
|
|
- filteredData = filteredData.filter(item =>
|
|
|
|
|
- item.name.includes(nameFilter.trim())
|
|
|
|
|
- )
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- if (statusFilter) {
|
|
|
|
|
- filteredData = filteredData.filter(item =>
|
|
|
|
|
- item.status === statusFilter
|
|
|
|
|
- )
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- baTable.table.data = filteredData
|
|
|
|
|
- baTable.table.total = filteredData.length
|
|
|
|
|
- baTable.table.loading = false
|
|
|
|
|
- resolve()
|
|
|
|
|
- }, 300)
|
|
|
|
|
- })
|
|
|
|
|
-}
|
|
|
|
|
-
|
|
|
|
|
|
|
+baTable.mount()
|
|
|
|
|
+baTable.getData()
|
|
|
provide('baTable', baTable)
|
|
provide('baTable', baTable)
|
|
|
|
|
|
|
|
// 搜索
|
|
// 搜索
|
|
@@ -239,11 +157,6 @@ const detail = (row: TableRow) => {
|
|
|
detailDialogRef.value.open(row)
|
|
detailDialogRef.value.open(row)
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
-
|
|
|
|
|
-onMounted(() => {
|
|
|
|
|
- baTable.mount()
|
|
|
|
|
- baTable.getData()
|
|
|
|
|
-})
|
|
|
|
|
</script>
|
|
</script>
|
|
|
|
|
|
|
|
<style scoped lang="scss">
|
|
<style scoped lang="scss">
|