lemons
/
zb-admin
1
0
Fork 1
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refactor:重构代码和修复 tab 关闭问题

This commit is contained in:
zouzhibing 2022-11-03 23:02:04 +08:00
parent 3da2172bce
commit 870792f6ec
17 changed files with 705 additions and 187 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/components/DataScreen/pie/index.vue
View File

@ -174,5 +174,6 @@ onMounted(() => {
.echarts{
width: 100%;
height: 100%;
}
</style>

2
src/components/Table/PropTable/index.vue
View File

@ -231,8 +231,6 @@ const deleteAction = (row) => {
height: 100%;
}
}
::v-deep{
.el-table__header th{
font-size: 15px;

2
src/layout/Footer/index.vue
View File

@ -7,11 +7,13 @@
<style scoped lang="scss">
.footer{
height: 40px;
font-size: 12px;
display: flex;
align-items: center;
justify-content: center;
background: #ffffff;
border-top: 1px solid #e4e7ed;
flex-shrink: 0;
color: rgba(0, 0, 0, 0.45);
}
</style>

2
src/layout/Main/index.vue
View File

@ -10,7 +10,7 @@
</router-view>
</div>
<Theme />
<Footer/>
</div>
</template>

29
src/layout/TagsView/components/MoreButton.vue
View File

@ -6,10 +6,10 @@
</el-button>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item @click="refresh">刷新当页</el-dropdown-item>
<el-dropdown-item @click="closeCurrentTab">关闭当前</el-dropdown-item>
<el-dropdown-item @click="closeOtherTab">关闭其他</el-dropdown-item>
<el-dropdown-item @click="closeAllTab">关闭所有</el-dropdown-item>
<el-dropdown-item @click="refresh"><el-icon :size="14"><Refresh /></el-icon> 刷新当页</el-dropdown-item>
<el-dropdown-item @click="closeCurrentTab"><el-icon :size="14"><FolderRemove/></el-icon> 关闭当前</el-dropdown-item>
<el-dropdown-item @click="closeOtherTab"><el-icon :size="14"><Close /></el-icon>关闭其他</el-dropdown-item>
<el-dropdown-item @click="closeAllTab"><el-icon :size="14"><FolderDelete /></el-icon>关闭所有</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
@ -18,7 +18,9 @@
import {computed} from "vue";
import {useSettingStore} from "@/store/modules/setting"
import {useTagsViewStore} from "@/store/modules/tagsView"
import { useRouter,useRoute } from 'vue-router'
const router = useRouter()
const route = useRoute()
const SettingStore = useSettingStore()
const TagsViewStore = useTagsViewStore()
const visitedViews = computed(() => TagsViewStore.visitedViews)
@ -27,24 +29,19 @@ const refresh = () => {
}
// 关闭当前
const closeCurrentTab = (event)=>{
closeSelectedTag(event,route)
TagsViewStore.toLastView(route.path)
TagsViewStore.delView(route.path)
}
// 关闭其他
const closeOtherTab= async ()=>{
const { name } = route
for(let item of visitedViews.value){
if(item.name!==name){
await closeSelectedTag(null,item)
}
}
TagsViewStore.delOtherViews(route.path)
}
// 关闭所有 去首页
const closeAllTab = async ()=>{
let visitedViews = await TagsViewStore.delAllViews()
await TagsViewStore.goHome()
await TagsViewStore.delAllViews()
TagsViewStore.goHome()
}
</script>
<style lang="scss" scoped>

1
src/layout/TagsView/index.vue
View File

@ -109,7 +109,6 @@ function toLastView(activeTabPath) {
router.push(nextTab.path);
TagsViewStore.addVisitedView(nextTab)
}
// Tab Click
const tabClick = (tabItem: TabsPaneContext) => {
let path = tabItem.props.name as string;
router.push(path);

237
src/mock/system.ts Normal file
View File

@ -0,0 +1,237 @@
export const userData =[
{
username:'zzb',
nickname:'林峰',
sex:'男',
role:'超级管理员',
status:true,
},
{
username:'zhangsan',
nickname:'张三',
sex:'女',
role:'管理员',
status:true,
},
{
username:'lisi',
nickname:'李四',
sex:'男',
role:'管理员',
status:true,
},
{
username:'wangwu',
nickname:'王五',
sex:'男',
role:'超级管理员',
status:false,
},
{
username:'zhaoliu',
nickname:'赵柳',
sex:'男',
role:'普通用户',
status:false,
},
]
export const roleData =[
{
roleName:'超级管理员',
roleId:'admin',
createTime:'2022-09-02',
},
{
roleName:'管理员',
roleId:'role',
createTime:'2022-09-02',
},
{
roleName:'普通用户',
roleId:'other',
createTime:'2022-09-02',
},
]
export const menuData =[
{
menuName:'首页',
menuType:'菜单',
menuRouter:'/home',
identification:'menu:home',
parentId:0,
level:1,
id:0,
createTime:'2022-09-02',
},
{
menuName:'表格',
menuType:'目录',
menuRouter:'/table',
identification:'menu:table',
parentId:0,
level:1,
id:1,
createTime:'2022-09-02',
children:[
{
menuName:'菜单1',
menuType:'菜单',
menuRouter:'/table',
identification:'menu1:view',
parentId:1,
level:2,
id:10,
createTime:'2022-09-02',
children:[
{
menuName:'按钮1',
menuType:'按钮',
menuRouter:'/table',
identification:'menu1:view:btn1',
parentId:10,
id:20,
level:3,
createTime:'2022-09-02',
},
{
menuName:'按钮2',
menuType:'按钮',
menuRouter:'/table',
identification:'menu1:view:btn2',
parentId:10,
id:21,
level:3,
createTime:'2022-09-02',
},
{
menuName:'按钮3',
menuType:'按钮',
menuRouter:'/table',
identification:'menu1:view:btn2',
parentId:10,
id:22,
level:3,
createTime:'2022-09-02',
}
]
}
]
},
{
menuName:'可视化图表',
menuType:'目录',
menuRouter:'/charts',
identification:'menu:charts',
parentId:0,
level:1,
id:1,
createTime:'2022-09-02',
children:[
{
menuName:'菜单1',
menuType:'菜单',
menuRouter:'/charts',
identification:'menu1:view',
parentId:1,
level:2,
id:10,
createTime:'2022-09-02',
children:[
{
menuName:'按钮1',
menuType:'按钮',
menuRouter:'/charts',
identification:'menu1:view:btn1',
parentId:10,
id:20,
level:3,
createTime:'2022-09-02',
},
{
menuName:'按钮2',
menuType:'按钮',
menuRouter:'/charts',
identification:'menu1:view:btn2',
parentId:10,
id:21,
level:3,
createTime:'2022-09-02',
},
{
menuName:'按钮3',
menuType:'按钮',
menuRouter:'/charts',
identification:'menu1:view:btn2',
parentId:10,
id:22,
level:3,
createTime:'2022-09-02',
}
]
}
]
},
{
menuName:'基础组件',
menuType:'目录',
menuRouter:'/components',
identification:'menu:components',
parentId:0,
level:1,
id:1,
createTime:'2022-09-02',
children:[
{
menuName:'菜单1',
menuType:'菜单',
menuRouter:'/components',
identification:'menu1:view',
parentId:1,
level:2,
id:10,
createTime:'2022-09-02',
children:[
{
menuName:'按钮1',
menuType:'按钮',
menuRouter:'/components',
identification:'menu1:view:btn1',
parentId:10,
id:20,
level:3,
createTime:'2022-09-02',
},
{
menuName:'按钮2',
menuType:'按钮',
menuRouter:'/components',
identification:'menu1:view:btn2',
parentId:10,
id:21,
level:3,
createTime:'2022-09-02',
},
{
menuName:'按钮3',
menuType:'按钮',
menuRouter:'/components',
identification:'menu1:view:btn2',
parentId:10,
id:22,
level:3,
createTime:'2022-09-02',
}
]
}
]
},
]

132
src/mock/table.ts Normal file
View File

@ -0,0 +1,132 @@
export const tableList = [
{
date: '2016-05-02',
name: '王五',
price: 20,
province: '上海',
admin: 'admin',
sex: 1,
id: 1,
age: 18,
city: '普陀区',
address: '上海市普陀区金沙江路 1518 弄',
zip: 200333,
},
{
date: '2018-06-11',
name: '梦琪',
price: 20,
province: '上海',
admin: 'admin',
sex: 1,
id: 2,
age: 22,
city: '普陀区',
address: '上海市普陀区金沙江路 1519 弄',
zip: 200333,
},
{
date: '2022-05-23',
name: '忆柳',
price: 22,
province: '上海',
admin: 'admin',
sex: 0,
id: 3,
age: 23,
city: '普陀区',
address: '上海市普陀区金沙江路 1520 弄',
zip: 200333,
},
{
date: '2022-01-24',
name: '之桃',
price: 33,
province: '上海',
admin: 'admin',
sex: 1,
id: 4,
age: 24,
city: '普陀区',
address: '上海市普陀区金沙江路 2222 弄',
zip: 200333,
},
{
date: '2022-07-22',
name: '慕青',
price: 45,
province: '上海',
admin: 'admin',
sex: 0,
id: 5,
age: 25,
city: '普陀区',
address: '上海市普陀区金沙江路 2223 弄',
zip: 200333,
},
{
date: '2016-05-02',
name: '问兰',
price: 47,
province: '上海',
admin: 'admin',
sex: 1,
id: 6,
age: 26,
city: '普陀区',
address: '上海市普陀区金沙江路 2224 弄',
zip: 200333,
},
{
date: '2016-08-02',
name: '元香',
price: 45,
province: '上海',
admin: 'admin',
sex: 0,
id: 7,
age: 27,
city: '普陀区',
address: '上海市普陀区金沙江路 2225 弄',
zip: 200333,
},
{
date: '2019-11-11',
name: '初夏',
price: 23,
province: '上海',
admin: 'admin',
sex: 1,
id: 8,
age: 28,
city: '普陀区',
address: '上海市普陀区金沙江路 2226 弄',
zip: 200333,
},
{
date: '2018-08-02',
name: '沛菡',
price: 33,
province: '上海',
admin: 'other',
sex: 0,
id: 9,
age: 29,
city: '普陀区',
address: '上海市普陀区金沙江路 2227 弄',
zip: 200339,
},
{
date: '2022-11-03',
name: '傲珊',
price: 222,
province: '浙江',
admin: 'admin',
sex: 1,
id: 10,
age: 30,
city: '杭州',
address: '杭州市滨江区建业路228号',
zip: 200433,
}
]

22
src/store/modules/tagsView.ts
View File

@ -1,6 +1,5 @@
import {defineStore} from 'pinia'
import { useRouter } from "vue-router";
const router = useRouter()
import router from "@/router/index";
export const useTagsViewStore = defineStore({
// id: 必须的，在所有 Store 中唯一
@ -52,6 +51,13 @@ export const useTagsViewStore = defineStore({
})
},
toLastView(activeTabPath){
let index = this.visitedViews.findIndex(item=>item.path===activeTabPath)
const nextTab = this.visitedViews[index + 1] || this.visitedViews[index - 1];
if (!nextTab) return;
router.push(nextTab.path);
this.addVisitedView(nextTab)
},
delVisitedView(path){
return new Promise(resolve => {
this.visitedViews = this.visitedViews.filter(v=>{
@ -82,9 +88,17 @@ export const useTagsViewStore = defineStore({
resolve([...this.visitedViews])
})
},
async goHome() {
router.push('/home');
delOtherViews(path){
this.visitedViews = this.visitedViews.filter(item => {
return item.path === path || item.meta.affix;
});
this.cachedViews = this.visitedViews.filter(item => {
return item.path === path || item.meta.affix;
});
},
goHome() {
this.activeTabsValue = '/home';
router.push({path: '/home'});
},
updateVisitedView(view){
for (let v of this.visitedViews) {

2
src/styles/common.scss
View File

@ -55,6 +55,8 @@ body{
}
/* nprogress样式 */
#nprogress .bar {
background: $primaryColor !important;

4
src/styles/element.scss
View File

@ -3,3 +3,7 @@
color: #252525;
background: #fafafa;
}
.el-table .el-table__header th {
background: var(--el-fill-color-light)!important;
}

32
src/views/excel/exportExcel/index.scss Normal file
View File

@ -0,0 +1,32 @@
.header{
display: flex;
padding: 16px 16px 16px 16px;
margin-bottom: 16px;
border-radius: 4px;
background: white;
box-shadow: 0 0 12px rgb(0 0 0 / 5%);
}
.footer{
flex: 1;
display: flex;
padding: 16px;
flex-direction: column;
border-radius: 4px;
overflow: hidden;
background: white;
box-shadow: 0 0 12px rgb(0 0 0 / 5%);
position: relative;
box-sizing: border-box;
.footer-inner{
position: relative;
width: 100%;
height: 100%;
}
.table{
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%
}
}

60
src/views/excel/exportExcel/index.vue
View File

@ -35,45 +35,28 @@
</template>
<script lang="ts" setup>
import { ref, reactive } from 'vue'
import * as dayjs from 'dayjs'
import { ElMessage, ElMessageBox } from 'element-plus'
import {tableList} from "@/mock/table"
import { ref } from 'vue'
import { exportExcel } from '@/utils/exprotExcel'
const data = []
for (let i = 0; i < 10; i++) {
data.push({
date: '2016-05-02',
name: '王五' + i,
price: 1 + i,
province: '上海',
admin: 'admin',
checked: true,
id: i + 1,
age: 0,
city: '普陀区',
address: '上海市普上海',
zip: 200333,
})
}
const column = [
{ name: 'id', label: 'id' },
{ name: 'name', label: '姓名' },
{ name: 'age', label: '年龄', align: 'right' },
{name: 'price', label: '价格', },
{ name: 'admin', label: '账号' },
{ name: 'address', label: '地址',width:180 },
{ name: 'address', label: '地址',width:250 },
{ name: 'date', label: '日期' ,width:140},
{ name: 'province', label: '省份' },
{ name: 'city', label: '城市' },
{ name: 'zip', label: '邮编' },
]
const list = ref(data)
const list = ref(tableList)
const input = ref('')
const format = ref('xlsx')
const exportExcelAction = () => {
exportExcel({
column,
data,
data:list.value,
filename: input.value || '导出 excel',
format: format.value,
autoWidth: true,
@ -82,36 +65,5 @@ const exportExcelAction = () => {
</script>
<style lang="scss" scoped>
.header{
display: flex;
padding: 16px 16px 16px 16px;
margin-bottom: 16px;
border-radius: 4px;
background: white;
box-shadow: 0 0 12px rgb(0 0 0 / 5%);
}
.footer{
flex: 1;
display: flex;
padding: 16px;
flex-direction: column;
border-radius: 4px;
overflow: hidden;
background: white;
box-shadow: 0 0 12px rgb(0 0 0 / 5%);
position: relative;
box-sizing: border-box;
.footer-inner{
position: relative;
width: 100%;
height: 100%;
}
.table{
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%
}
}
@import "./index";
</style>

114
src/views/system/menu.vue
View File

@ -1,33 +1,39 @@
<template>
<u-container-layout class="components-container">
<el-form :inline="true" :model="formInline" class="demo-form-inline" ref="ruleFormRef1">
<el-form-item label="用户名" prop="username">
<el-input v-model="formInline.username" />
</el-form-item>
<el-form-item>
<el-button @click="reset(ruleFormRef1)">重置</el-button>
<el-button type="primary" @click="onSubmit">查询</el-button>
</el-form-item>
</el-form>
<div style="margin-bottom: 15px; display: flex; justify-content: flex-end">
<el-button type="primary" @click="add">新增</el-button>
<div class="app-container">
<div class="header">
<el-form :inline="true" :model="formInline" class="demo-form-inline" ref="ruleFormRef1">
<el-form-item label="用户名" prop="username">
<el-input v-model="formInline.username" />
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit" :icon="Search">查询</el-button>
<el-button @click="reset(ruleFormRef1)">重置</el-button>
</el-form-item>
</el-form>
</div>
<div class="footer">
<div class="util">
<el-button type="primary" @click="add">新增</el-button>
</div>
<div class="table-wrap">
<el-table :data="tableData" style="width: 100%" border default-expand-all row-key="id" class="table">
<el-table-column prop="menuName" label="权限名称" />
<el-table-column prop="menuType" label="权限类型" />
<el-table-column prop="menuRouter" label="权限路由" />
<el-table-column prop="identification" label="权限标识" />
<el-table-column prop="status" label="操作">
<template #default="scope">
<el-button type="primary" size="small" icon="Edit" @click="edit(scope.row)">
编辑
</el-button>
<el-button @click="del(scope.row)" type="danger" size="small" icon="Delete">
删除
</el-button>
</template>
</el-table-column>
</el-table>
</div>
</div>
<el-table :data="tableData" style="width: 100%" border default-expand-all row-key="id">
<el-table-column prop="menuName" label="权限名称" />
<el-table-column prop="menuType" label="权限类型" />
<el-table-column prop="menuRouter" label="权限路由" />
<el-table-column prop="identification" label="权限标识" />
<el-table-column prop="status" label="操作">
<template #default="scope">
<el-button type="primary" size="small" icon="Edit" @click="edit(scope.row)">
编辑
</el-button>
<el-button @click="del(scope.row)" type="danger" size="small" icon="Delete">
删除
</el-button>
</template>
</el-table-column>
</el-table>
<el-drawer v-model="dialogVisible" :title="title" width="50%">
<el-form
ref="ruleFormRef"
@ -61,13 +67,14 @@
</span>
</template>
</el-drawer>
</u-container-layout>
</div>
</template>
<script lang="ts" setup>
import { ElMessageBox, ElMessage, FormInstance } from 'element-plus'
import { reactive, ref } from 'vue'
import { menuData } from './data/user'
import {Search } from '@element-plus/icons-vue'
import { menuData } from '@/mock/system'
import * as dayjs from 'dayjs'
const tableData = ref(menuData)
const dialogVisible = ref(false)
@ -159,4 +166,49 @@
}
</script>
<style scoped></style>
<style scoped lang="scss">
.header{
display: flex;
padding: 16px 16px 0px 16px;
margin-bottom: 16px;
border-radius: 4px;
background: white;
box-shadow: 0 0 12px rgb(0 0 0 / 5%);
}
.footer{
flex: 1;
display: flex;
padding: 16px;
flex-direction: column;
border-radius: 4px;
overflow: hidden;
background: white;
box-shadow: 0 0 12px rgb(0 0 0 / 5%);
position: relative;
box-sizing: border-box;
.util{
margin-bottom: 15px;
display: flex;
justify-content: flex-end;
flex-shrink: 0;
}
.table-wrap{
flex: 1;
display: flex;
position: relative;
overflow: hidden;
}
.table-inner{
width: 100%;
height: 100%;
position: relative;
}
.table{
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%
}
}
</style>

104
src/views/system/role.vue
View File

@ -1,31 +1,37 @@
<template>
<u-container-layout class="components-container">
<el-form :inline="true" :model="formInline" class="demo-form-inline" ref="ruleFormRef1">
<el-form-item label="角色名称" prop="roleName">
<el-input v-model="formInline.roleName" />
</el-form-item>
<el-form-item>
<el-button @click="reset(ruleFormRef1)">重置</el-button>
<el-button type="primary" @click="onSubmit">查询</el-button>
</el-form-item>
</el-form>
<div style="margin-bottom: 15px; display: flex; justify-content: flex-end">
<el-button type="primary" @click="add">新增</el-button>
<div class="app-container">
<div class="header">
<el-form :inline="true" :model="formInline" class="demo-form-inline" ref="ruleFormRef1">
<el-form-item label="角色名称" prop="roleName">
<el-input v-model="formInline.roleName" />
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit" :icon="Search">查询</el-button>
<el-button @click="reset(ruleFormRef1)">重置</el-button>
</el-form-item>
</el-form>
</div>
<div class="footer">
<div class="util">
<el-button type="primary" @click="add">新增</el-button>
</div>
<div class="table-inner">
<el-table :data="tableData" style="width: 100%" border>
<el-table-column prop="roleName" label="角色名称" />
<el-table-column prop="createTime" label="创建时间" />
<el-table-column prop="status" label="操作">
<template #default="scope">
<el-button type="primary" size="small" icon="Edit" @click="edit(scope.row)">
编辑
</el-button>
<el-button @click="del(scope.row)" type="danger" size="small" icon="Delete">
删除
</el-button>
</template>
</el-table-column>
</el-table>
</div>
</div>
<el-table :data="tableData" style="width: 100%" border>
<el-table-column prop="roleName" label="角色名称" />
<el-table-column prop="createTime" label="创建时间" />
<el-table-column prop="status" label="操作">
<template #default="scope">
<el-button type="primary" size="small" icon="Edit" @click="edit(scope.row)">
编辑
</el-button>
<el-button @click="del(scope.row)" type="danger" size="small" icon="Delete">
删除
</el-button>
</template>
</el-table-column>
</el-table>
<el-drawer v-model="dialogVisible" :title="title" width="50%">
<el-form
ref="ruleFormRef"
@ -58,13 +64,14 @@
</span>
</template>
</el-drawer>
</u-container-layout>
</div>
</template>
<script lang="ts" setup>
import { ElMessageBox, ElMessage, FormInstance } from 'element-plus'
import {Search } from '@element-plus/icons-vue'
import { reactive, ref } from 'vue'
import { roleData, menuData } from './data/user'
import { roleData } from '@/mock/system'
import * as dayjs from 'dayjs'
const tableData = ref(roleData)
const dialogVisible = ref(false)
@ -155,4 +162,43 @@
}
</script>
<style scoped></style>
<style scoped lang="scss">
.header{
display: flex;
padding: 16px 16px 0px 16px;
margin-bottom: 16px;
border-radius: 4px;
background: white;
box-shadow: 0 0 12px rgb(0 0 0 / 5%);
}
.footer{
flex: 1;
display: flex;
padding: 16px;
flex-direction: column;
border-radius: 4px;
overflow: hidden;
background: white;
box-shadow: 0 0 12px rgb(0 0 0 / 5%);
position: relative;
box-sizing: border-box;
.util{
margin-bottom: 15px;
display: flex;
justify-content: flex-end;
flex-shrink: 0;
}
.table-inner{
flex: 1;
position: relative;
}
.table{
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%
}
}
</style>

118
src/views/system/user.vue
View File

@ -1,38 +1,44 @@
<template>
<u-container-layout class="components-container">
<el-form :inline="true" :model="formInline" class="demo-form-inline" ref="ruleFormRef1">
<el-form-item label="用户名" prop="username">
<el-input v-model="formInline.username" />
</el-form-item>
<el-form-item>
<el-button @click="reset(ruleFormRef1)">重置</el-button>
<el-button type="primary" @click="onSubmit">查询</el-button>
</el-form-item>
</el-form>
<div style="margin-bottom: 15px; display: flex; justify-content: flex-end">
<el-button type="primary" @click="add">新增</el-button>
<div class="app-container">
<div class="header">
<el-form :inline="true" :model="formInline" ref="ruleFormRef1">
<el-form-item label="用户名" prop="username">
<el-input v-model="formInline.username" />
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit" :icon="Search">查询</el-button>
<el-button @click="reset(ruleFormRef1)">重置</el-button>
</el-form-item>
</el-form>
</div>
<div class="footer">
<div class="util">
<el-button type="primary" @click="add">新增</el-button>
</div>
<div class="table-inner">
<el-table :data="tableData" style="width: 100%" border>
<el-table-column prop="username" label="用户名" />
<el-table-column prop="nickname" label="昵称" />
<el-table-column prop="sex" label="性别" />
<el-table-column prop="role" label="角色" />
<el-table-column prop="status" label="状态">
<template #default="scope">
<el-switch v-model="scope.row.status" @change="changeStatus(scope.row)" />
</template>
</el-table-column>
<el-table-column prop="status" label="操作">
<template #default="scope">
<el-button type="primary" size="small" icon="Edit" @click="edit(scope.row)">
编辑
</el-button>
<el-button @click="del(scope.row)" type="danger" size="small" icon="Delete">
删除
</el-button>
</template>
</el-table-column>
</el-table>
</div>
</div>
<el-table :data="tableData" style="width: 100%" border>
<el-table-column prop="username" label="用户名" />
<el-table-column prop="nickname" label="昵称" />
<el-table-column prop="sex" label="性别" />
<el-table-column prop="role" label="角色" />
<el-table-column prop="status" label="状态">
<template #default="scope">
<el-switch v-model="scope.row.status" @change="changeStatus(scope.row)" />
</template>
</el-table-column>
<el-table-column prop="status" label="操作">
<template #default="scope">
<el-button type="primary" size="small" icon="Edit" @click="edit(scope.row)">
编辑
</el-button>
<el-button @click="del(scope.row)" type="danger" size="small" icon="Delete">
删除
</el-button>
</template>
</el-table-column>
</el-table>
<el-dialog @close="close" v-model="dialogVisible" :title="title" width="50%">
<el-form
ref="ruleFormRef"
@ -69,13 +75,14 @@
</span>
</template>
</el-dialog>
</u-container-layout>
</div>
</template>
<script lang="ts" setup>
import { ElMessageBox, ElMessage, FormInstance } from 'element-plus'
import {Search } from '@element-plus/icons-vue'
import { reactive, ref } from 'vue'
import { userData } from './data/user'
import { userData } from '@/mock/system'
import * as dayjs from 'dayjs'
const tableData = ref(userData)
const dialogVisible = ref(false)
@ -168,4 +175,43 @@
}
</script>
<style scoped></style>
<style scoped lang="scss">
.header{
display: flex;
padding: 16px 16px 0px 16px;
margin-bottom: 16px;
border-radius: 4px;
background: white;
box-shadow: 0 0 12px rgb(0 0 0 / 5%);
}
.footer{
flex: 1;
display: flex;
padding: 16px;
flex-direction: column;
border-radius: 4px;
overflow: hidden;
background: white;
box-shadow: 0 0 12px rgb(0 0 0 / 5%);
position: relative;
box-sizing: border-box;
.util{
margin-bottom: 15px;
display: flex;
justify-content: flex-end;
flex-shrink: 0;
}
.table-inner{
flex: 1;
position: relative;
}
.table{
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%
}
}
</style>

30
src/views/table/InlineEditTable/index.vue
View File

@ -12,9 +12,11 @@
</div>
<div class="footer">
<el-table :data="list" style="width: 100%" :border="true" v-loading="loading">
<el-table-column prop="id" width="60" label="id" />
<el-table-column prop="name" label="姓名" min-width="200px">
<el-table
:data="list"
style="width: 100%" :border="true" v-loading="loading">
<el-table-column prop="id" width="60" label="id" align="center"/>
<el-table-column prop="name" label="姓名" min-width="200px" align="center">
<template #default="scope">
<template v-if="scope.row.edit">
<div style="display: flex; align-items: center">
@ -32,19 +34,21 @@
<template v-else>{{ scope.row.name }}</template>
</template>
</el-table-column>
<el-table-column prop="age" label="年龄" />
<el-table-column prop="sex" label="性别">
<el-table-column prop="age" label="年龄" align="center"/>
<el-table-column prop="sex" label="性别" align="center">
<template #default="scope">
{{ scope.row.sex ? '男' : '女' }}
</template>
</el-table-column>
<el-table-column prop="price" label="价格" />
<el-table-column prop="admin" label="账号" />
<el-table-column prop="address" label="地址" width="180"/>
<el-table-column prop="date" label="日期" width="180"/>
<el-table-column prop="province" label="省份" width="120"/>
<el-table-column prop="city" label="城市" />
<el-table-column prop="operator" label="操作" width="180px" fixed="right">
<el-table-column prop="price" label="价格" align="center"/>
<el-table-column prop="admin" label="账号" align="center"/>
<el-table-column prop="address"
:show-overflow-tooltip="true"
label="地址" width="180" align="center"/>
<el-table-column prop="date" label="日期" width="180" align="center"/>
<el-table-column prop="province" label="省份" width="120" align="center"/>
<el-table-column prop="city" label="城市" align="center"/>
<el-table-column prop="operator" label="操作" width="180px" fixed="right" align="center">
<template #default="scope">
<el-button
v-if="scope.row.edit"
@ -102,7 +106,7 @@
img: 'https://img1.baidu.com/it/u=300787145,1214060415&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500',
age: 0,
city: '普陀区',
address: '上海市普上海',
address: `上海市普陀区金沙江路 222${i} 弄`,
zip: 200333,
})
}