企业家增加首字母

This commit is contained in:
jacky 2024-04-22 21:12:52 +08:00
parent ac53d63b78
commit dbc650f887
3 changed files with 32 additions and 5 deletions

View File

@ -18,7 +18,7 @@
<el-row :gutter="0">
<el-col :span="16">
<el-row :gutter="10">
<el-col :span="12">
<el-col :span="10">
<el-form-item label="姓名" prop="name" style="width: 100%">
<el-input v-model="editForm.name" autocomplete="off" style="width: 100%" />
</el-form-item>
@ -29,7 +29,7 @@
@change="toggleCase" />
</el-form-item>
</el-col>
<el-col :span="8">
<el-col :span="10">
<el-form-item label="职称" prop="title" style="width: 100%">
<el-input v-model="editForm.title" autocomplete="off" style="width: 100%" />
</el-form-item>

View File

@ -18,12 +18,18 @@
<el-row :gutter="0">
<el-col :span="16">
<el-row :gutter="10">
<el-col :span="12">
<el-col :span="10">
<el-form-item label="姓名" prop="name" style="width: 100%">
<el-input v-model="editForm.name" autocomplete="off" style="width: 100%" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-col :span="4">
<el-form-item label="首字母" prop="headChar" style="width: 100%">
<el-input v-model="editForm.headChar" :maxlength="1" autocomplete="off" style="width: 100%"
@change="toggleCase" />
</el-form-item>
</el-col>
<el-col :span="10">
<el-form-item label="企业名称" prop="enterprise" style="width: 100%">
<el-input v-model="editForm.enterprise" autocomplete="off" style="width: 100%" />
</el-form-item>
@ -129,6 +135,9 @@ const rules = reactive({
name: [
{ required: true, message: '请输入姓名', trigger: 'blur' }
],
headChar: [
{ required: true, message: '请输入首字母', trigger: 'blur' }
],
enterprise: [
{ required: true, message: '请输入企业名称', trigger: 'blur' }
],
@ -144,6 +153,7 @@ const emptyForm = () => {
checkFlag.value = false
editForm.value = {
ID: 0,
headChar: '',
name: '',
enterprise: '',
avatar: '',
@ -154,6 +164,18 @@ const emptyForm = () => {
qrcodeUrl: '',
}
}
const toggleCase = (value) => {
const newVal = value.split('').map(char => {
if (char.match(/[a-z]/)) {
return char.toUpperCase();
} else if (char.match(/[A-Z]/)) {
return char.toLowerCase();
}
return char;
}).join('');
editForm.value.headChar = newVal
}
//
const handleFormClose = () => {
showDrawer.value = false

View File

@ -24,7 +24,12 @@
<!-- 由于此处菜单跟左侧列表一一对应所以不需要分页 pageSize默认999 -->
<el-table ref="multipleTable" :data="tableData" row-key="ID" @selection-change="handleSelectionChange">
<el-table-column fixed type="selection" width="40" align="center" />
<el-table-column align="left" label="ID" min-width="60" prop="ID" />
<el-table-column align="left" label="ID" min-width="40" prop="ID" />
<el-table-column align="left" label="首字母" min-width="50" prop="headChar">
<template #default="scope">
<el-text size="large" tag="b">{{ scope.row.headChar }}</el-text>
</template>
</el-table-column>
<el-table-column align="left" label="头像" min-width="120" prop="avatar">
<template #default="scope">
<el-image v-if="scope.row.avatar" :src="scope.row.avatar" class="file" fit="cover"