From 9245fae41fc9cb35b1f1feb3c66f5bb135874650 Mon Sep 17 00:00:00 2001
From: shj <1790240199@qq.com>
Date: 星期五, 15 七月 2022 09:17:22 +0800
Subject: [PATCH] Merge branch 'master' of https://sinanoaq.cn:8888/r/gtqtOut
---
src/components/userSelections/index.vue | 198 ++++++++++++++++++++++++++++++++++++------------
1 files changed, 147 insertions(+), 51 deletions(-)
diff --git a/src/components/userSelections/index.vue b/src/components/userSelections/index.vue
index c71c9cf..19458f2 100644
--- a/src/components/userSelections/index.vue
+++ b/src/components/userSelections/index.vue
@@ -18,7 +18,7 @@
:filter-node-method="filterNode"
/>
</el-aside>
- <el-container style="margin-right: 15px;min-width:560px;">
+ <el-container style="margin: 0 15px;min-width:560px;">
<el-header style="font-size: 12px">
<el-form :inline="true" :model="formInline" class="demo-form-inline">
<el-form-item>
@@ -34,28 +34,25 @@
</el-form-item>
</el-form>
</el-header>
- <el-main>
- <el-scrollbar>
+ <el-main style="position: relative;">
<el-table
:data="tableData"
:header-cell-style="{background:'#f6f7fa',color:'#909399',fontWeight:400}"
- ref="multipleTableRef"
- highlight-current-row
- @row-click="rowClick"
- @selection-change="handleCurrentChange"
>
- <el-table-column
- type="selection"
- width="50"
- >
+ <el-table-column align="center" width="55">
+ <template #default="scope">
+ <el-radio-group v-model="radio1" @change="radio">
+ <el-radio :label="scope.row.date" size="large">{{null}}</el-radio>
+ </el-radio-group>
+ </template>
</el-table-column>
<el-table-column prop="date" label="登录名" width="100" show-overflow-tooltip sortable />
<el-table-column prop="name" label="用户名" width="100" show-overflow-tooltip sortable />
- <el-table-column prop="address" label="所属机构" width="110" show-overflow-tooltip sortable />
- <el-table-column prop="address" label="所属部门" width="100" show-overflow-tooltip sortable/>
+ <el-table-column prop="address" label="所属机构" width="115" show-overflow-tooltip sortable />
+ <el-table-column prop="department" label="所属部门" width="115" show-overflow-tooltip sortable/>
<el-table-column label="状态"
+ width="80"
prop="tag"
- width="100"
:filters="[
{ text: '正常', value: 'Home' },
{ text: '不正常', value: 'Office' },
@@ -71,11 +68,33 @@
</template>
</el-table-column>
</el-table>
- </el-scrollbar>
+ <div class="pages">
+ <el-pagination
+ v-model:currentPage="pageIndex"
+ v-model:page-size="pageSize"
+ :page-sizes="[10, 20, 30]"
+ :pager-count="5"
+ :small="small"
+ :disabled="disabled"
+ :background="background"
+ layout="total, sizes, prev, pager, next, jumper"
+ :total="40"
+ @size-change="handleSizeChange"
+ @current-change="handleCurrentChange"
+ />
+ </div>
</el-main>
</el-container>
- <div>
- <el-tag v-for="tag in dynamicTags" :key="tag" class="mx-1" style="margin:5px" closable :disable-transitions="false" @close="handleClose(tag)">
+ <div style="width: 200px;">
+ <el-tag
+ v-for="tag in dynamicTags"
+ :key="tag"
+ class="mx-1"
+ style="margin: 5px"
+ closable
+ :disable-transitions="false"
+ @close="handleClose(tag)"
+ >
{{ tag }}
</el-tag>
</div>
@@ -100,7 +119,7 @@
import type {
ElTree,
- ElTable,
+ // ElTable,
} from 'element-plus'
interface Tree {
@@ -108,11 +127,11 @@
label: string
children?: Tree[]
}
-interface User {
- date: string
- name: string
- address: string
-}
+// interface User {
+// date: string
+// name: string
+// address: string
+// }
export default defineComponent({
name: 'userSelections',
components: {
@@ -195,14 +214,43 @@
],
},
]
- const item = {
- date: '龚赛健',
- name: '龚赛健',
- address: '综合办公室',
- tag: '正常',
- }
- const tableData = ref(Array.from({ length: 5 }).fill(item))
-
+ // const item = {
+ // date: '孙刚',
+ // name: '龚赛健',
+ // address: '综合办公室',
+ // tag: '正常',
+ // }
+ // const tableData = ref(Array.from({ length: 7 }).fill(item))
+ const tableData = [
+ {
+ date: '孙刚',
+ name: '孙刚',
+ address: '',
+ department: '经营班子',
+ tag: '正常',
+ },
+ {
+ date: '谭柏',
+ name: '谭柏',
+ address: '',
+ department: '经营班子',
+ tag: '正常',
+ },
+ {
+ date: '倪威',
+ name: '倪威',
+ address: '',
+ department: '经营班子',
+ tag: '正常',
+ },
+ {
+ date: '倪玲婕',
+ name: '倪玲婕',
+ address: '',
+ department: '经营班子',
+ tag: '正常',
+ },
+ ];
// 定义表单搜索
const formInline = reactive({
name: '',
@@ -212,25 +260,28 @@
console.log('submit!')
}
- const multipleTableRef = ref<InstanceType<typeof ElTable>>()
- // const currentRow = ref()
-
- // 当某一行被点击时会触发该事件
- // const handleRowClick = (row: any, column: any, event: Event) => {
- // emit('row-click', row, column, event)
- // }
- // const singleTableRef = ref<InstanceType<typeof ElTable>>()
- // const setCurrent = (row?: User) => {
- // singleTableRef.value!.setCurrentRow(row)
- // }
- // const handleCurrentChange = (val: User | undefined) => {
- // currentRow.value = val
- // }
-
+ // const multipleTableRef = ref<InstanceType<typeof ElTable>>()
// 右方点击添加后显示标签
- const dynamicTags = ref(['Tag 1', 'Tag 2', 'Tag 3']);
+ const dynamicTags = ref(['胡海涛']);
const handleClose = (tag: string) => {
dynamicTags.value.splice(dynamicTags.value.indexOf(tag), 1);
+ radio1.value=""
+ };
+ const radio1=ref('谭柏')
+ const radio=(event:any)=>{
+ dynamicTags.value[0]=event
+ }
+
+ // 分页
+ const pageIndex = ref(4);
+ const pageSize = ref(10);
+ // 分页改变
+ const handleSizeChange = (val: number) => {
+ console.log(`${val} items per page`);
+ };
+ // 分页未改变
+ const handleCurrentChange = (val: number) => {
+ console.log(`current page: ${val}`);
};
return {
openDialog,
@@ -243,12 +294,15 @@
tableData,
formInline,
onSubmit,
- // currentRow,
- // setCurrent,
- multipleTableRef,
+ // multipleTableRef,
handleClose,
dynamicTags,
- // handleCurrentChange,
+ handleSizeChange,
+ handleCurrentChange,
+ pageIndex,
+ pageSize,
+ radio1,
+ radio,
};
},
});
@@ -259,6 +313,7 @@
color: var(--el-text-color-primary);
line-height: 32px;
--el-header-height: 45px;
+ padding: 0;
}
.layout-container-demo .el-aside {
padding: 10px;
@@ -306,6 +361,7 @@
}
::v-deep .el-form-item{
margin-bottom: 0;
+ margin-right: 0;
}
//弹窗底部边框线
::v-deep .el-dialog__footer{
@@ -328,4 +384,44 @@
::v-deep .el-checkbox__input .el-checkbox__inner{
border-radius: 50%;
}
+/*分页*/
+.pages{
+ display: flex;
+ justify-content: flex-end;
+ margin-top: 15px;
+ align-items: center;
+ //position: absolute;
+ //bottom: 0;
+}
+::v-deep .el-pagination{
+ width: 100%;
+}
+::v-deep .el-pagination .el-pager li {
+ margin: 0 5px;
+ background-color: #f4f4f5;
+ color: #606266;
+ min-width: 30px;
+ border-radius: 2px;
+}
+::v-deep .el-pagination .el-pager li.is-active {
+ background-color: #409eff;
+ color: #fff;
+}
+::v-deep .el-pagination .btn-prev {
+ margin: 0 5px;
+ background-color: #f4f4f5;
+ color: #606266;
+ min-width: 30px;
+ border-radius: 2px;
+}
+::v-deep .el-pagination button:disabled{
+ color: #c0c4cc;
+}
+::v-deep .el-pagination .btn-next{
+ margin: 0 5px;
+ background-color: #f4f4f5;
+ color: #606266;
+ min-width: 30px;
+ border-radius: 2px;
+}
</style>
\ No newline at end of file
--
Gitblit v1.9.2