企业家增加首字母
This commit is contained in:
parent
ac53d63b78
commit
dbc650f887
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
Loading…
Reference in New Issue