Kane/vue-learning
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

开始研究el-table。

Browse Source
This commit is contained in:
Kane Wang 2023-01-18 17:49:24 +08:00
parent 7d7b9523c6
commit 905d22abc6
3 changed files with 51 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
企业级管理系统/web/admin_system/src/layout/Index.vue
View File

@ -2,7 +2,7 @@
* @Author: Kane
* @Date: 2023-01-04 11:05:44
* @LastEditors: Kane
* @LastEditTime: 2023-01-09 15:50:52
* @LastEditTime: 2023-01-18 17:40:55
* @FilePath: \admin_system\src\layout\Index.vue
* @Description:
*
@ -66,7 +66,7 @@ export default {
}
#layout-main {
background-color: #ddd;
background-color: #eee;
/* height: 0; */
/* flex-grow: 1; */
}

4
企业级管理系统/web/admin_system/src/layout/components/Header.vue
View File

@ -2,7 +2,7 @@
* @Author: Kane
* @Date: 2023-01-04 11:39:04
* @LastEditors: Kane
* @LastEditTime: 2023-01-11 17:07:13
* @LastEditTime: 2023-01-18 14:18:28
* @FilePath: \admin_system\src\layout\components\Header.vue
* @Description:
*
@ -42,7 +42,7 @@ export default {
methods: {
logout()
{
this.$confirm("是否退出系统？", "提示", {
this.$confirm("是否退出系统？", "请确认", {
confirmButtonText: "是",
cancelButtonText: "否",
type: "warning",

50
企业级管理系统/web/admin_system/src/views/info/StaffInfo.vue
View File

@ -1,8 +1,9 @@
/* eslint-disable */
<!--
* @Author: Kane
* @Date: 2023-01-12 14:43:46
* @LastEditors: Kane
* @LastEditTime: 2023-01-18 11:45:26
* @LastEditTime: 2023-01-18 17:38:03
* @FilePath: \admin_system\src\views\info\StaffInfo.vue
* @Description:
*
@ -21,12 +22,23 @@
<el-col :span="12"></el-col>
</el-row>
</el-form>
<el-table ref="table" :data="table_data"> </el-table>
<el-table ref="table" :data="table_data" border width="100%" :stripe="true">
<el-table-column type="selection" min-width="30" align="center"></el-table-column>
<el-table-column prop="staff_name" min-width="200" label="员工名称" align="center"></el-table-column>
<el-table-column prop="staff_code" min-width="100" label="工号" align="center"></el-table-column>
<el-table-column prop="p13uid" min-width="200" label="P13账号" align="center"></el-table-column>
<el-table-column label="操作" min-width="200" align="center">
<template #default="scope">
<el-button type="warning" size="mini" @click="onTableEdit(scope.row)">编辑</el-button>
<el-button type="danger" size="mini">删除</el-button>
</template>
</el-table-column>
</el-table>
</div>
</template>
<script>
/* eslint-disable */
/* eslint-disable no-unused-vars*/
export default {
name: "staff-info",
data()
@ -37,9 +49,33 @@ export default {
},
table_data: [
{ staff_name: "王炜", staff_code: "588", p13uid: "wangwei-202" },
{ staff_name: "王炜", staff_code: "588", p13uid: "wangwei-202" },
{ staff_name: "王炜", staff_code: "588", p13uid: "wangwei-202" },
{ staff_name: "王炜", staff_code: "588", p13uid: "wangwei-202" },
{ staff_name: "王炜", staff_code: "588", p13uid: "wangwei-202" },
],
};
},
methods: {
onTableEdit(row)
{
},
/**
* 根据表格行index返回样式，实现斑马纹
* @param row
* @param rowIndex
* @return 返回的样式名称
*/
tabRowClassName(row, rowIndex)
{
let index = rowIndex + 1;
if (index % 2 == 0)
{
return 'warning-row';
}
},
},
};
</script>
@ -63,6 +99,10 @@ export default {
text-align: left;
}
.query_box>*+* {
margin-top: 15px;
}
.info_box {
background-color: #fff;
border-radius: 5px;
@ -71,6 +111,10 @@ export default {
width: 100%;
}
.el-table .warning-row {
background-color: #F3F9FF;
}
.query_box:hover,
.info_box:hover {