From dc1a337bae00425ce6b1f68a96d3a7418d4a0926 Mon Sep 17 00:00:00 2001
From: 13937891274 <kxc0822>
Date: 星期四, 07 七月 2022 17:57:09 +0800
Subject: [PATCH] 应急预案弹窗
---
src/components/userSelections/index.vue | 61 ++++++++++++++++++++++++++++--
1 files changed, 56 insertions(+), 5 deletions(-)
diff --git a/src/components/userSelections/index.vue b/src/components/userSelections/index.vue
index f543cd9..c71c9cf 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>
+ <el-container style="margin-right: 15px;min-width:560px;">
<el-header style="font-size: 12px">
<el-form :inline="true" :model="formInline" class="demo-form-inline">
<el-form-item>
@@ -40,11 +40,19 @@
: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>
<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="130" show-overflow-tooltip sortable />
- <el-table-column prop="address" label="所属部门" width="130" 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 label="状态"
prop="tag"
width="100"
@@ -66,8 +74,12 @@
</el-scrollbar>
</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)">
+ {{ tag }}
+ </el-tag>
+ </div>
</el-container>
-
<template #footer>
<span class="dialog-footer">
<el-button size="default" type="primary" @click="onCancel">确定</el-button>
@@ -95,6 +107,11 @@
id: number
label: string
children?: Tree[]
+}
+interface User {
+ date: string
+ name: string
+ address: string
}
export default defineComponent({
name: 'userSelections',
@@ -196,6 +213,25 @@
}
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 dynamicTags = ref(['Tag 1', 'Tag 2', 'Tag 3']);
+ const handleClose = (tag: string) => {
+ dynamicTags.value.splice(dynamicTags.value.indexOf(tag), 1);
+ };
return {
openDialog,
closeDialog,
@@ -207,7 +243,12 @@
tableData,
formInline,
onSubmit,
- multipleTableRef
+ // currentRow,
+ // setCurrent,
+ multipleTableRef,
+ handleClose,
+ dynamicTags,
+ // handleCurrentChange,
};
},
});
@@ -277,4 +318,14 @@
margin-right: 0;
border-radius: 4px 4px 0 0;
}
+//单选框圆形
+::v-deep .el-table__header .el-table-column--selection .cell .el-checkbox {
+ display:none
+}
+::v-deep .el-table-column--selection .cell{
+ text-align: center;
+}
+::v-deep .el-checkbox__input .el-checkbox__inner{
+ border-radius: 50%;
+}
</style>
\ No newline at end of file
--
Gitblit v1.9.2