【Element】el-form-item的label属性将文字颜色变色

<template> <div class="search-form-container"> <el-select v-model="selectedItem" filterable clearable placeholder="请搜索并选择菜单" @change="handleSelectChange" :filter-method="filterMenu" @clear="handleClear" @focus="handleFocus" remote :remote-method="remoteMethod" > <el-option v-for="item in filteredMenus" :key="item.funcId" :label="item.name" :value="item.menuUrl" /> </el-select> <el-form :model="formData" label-width="120px" class="form-container"> <el-form-item label="操作员编号"> <el-input v-model="formData.createOpId" disabled /> </el-form-item> <el-form-item label="操作员编码"> <el-input v-model="formData.createOpCode" disabled /> </el-form-item> <el-form-item label="菜单编号"> <el-input v-model="formData.funcId" disabled /> </el-form-item> <el-form-item label="系统来源"> <el-input v-model="formData.opSource" disabled /> </el-form-item> <el-form-item label="页面编码"> <el-input v-model="formData.pageCode" disabled /> </el-form-item> <el-form-item label="菜单名称"> <el-input v-model="formData.funcName" disabled /> </el-form-item> <el-form-item label="创建时间"> <el-date-picker v-model="formData.createDate" type="datetime" value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择日期时间" disabled /> </el-form-item> <el-form-item label="生效时间"> <el-date-picker v-model="formData.effectiveDate" type="datetime" value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择生效时间" /> </el-form-item> <el-form-item label="失效时间"> <el-date-picker v-model="formData.expireDate" type="datetime" value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择失效时间" /> </el-form-item> <el-form-item label="是否可以评价"> <el-radio-group v-model="formData.enabled"> <el-radio :label="true">是</el-radio> <el-radio :label="false">否</el-radio> </el-radio-group> </el-form-item> <div class="form-actions"> <el-button @click="resetForm">重置</el-button> <el-button type="primary" @click="saveForm">保存</el-button> </div> </el-form> </div> </template> <script> import { MUTATION } from '../config/constant.js'; import WbStore from '../utils/wbstore'; import { Button, Input, Select, FormItem, RadioGroup, Radio, Form, DatePicker, Option, } from 'element-ui'; import PinyinMatch from 'pinyin-match'; export default { name: 'MenuConfiguration', components: { [Button.name]: Button, [Input.name]: Input, [Select.name]: Select, [FormItem.name]: FormItem, [RadioGroup.name]: RadioGroup, [Form.name]: Form, [DatePicker.name]: DatePicker, [Option.name]: Option, [Radio.name]: Radio, }, data() { return { allMenus: [], selectedItem: null, formData: { createOpId: '', //创建的操作员编号 createOpCode: '', //创建的操作员编码 ext_C: '', //优化举措 ext_B: '', //下载地址 ext_A: '', //详细内容 funcId: '', //菜单编号 opSource: '', //系统来源 pageCode: '', //页面编号 enabled: '', //是否可以评价 A:允许 C：不允许 funcName: '', //菜单名称 hallFuncBaseId: '', //菜单基础编号 expireDate: '', //失效时间 effectiveDate: '', //生效时间 createDate: '', //创建时间 }, filteredMenus: [], }; }, mounted() { let menu_ = WbStore.opsForHash.get(MUTATION.MENUS, 'menus') || {}; this.$store.commit(MUTATION.MENUS, menu_.kMenu); this.allMenus = Object.values(menu_.kMenu); }, methods: { handleFocus() { this.filteredMenus = []; }, handleClear() { this.filteredMenus = []; this.resetForm(); }, remoteMethod(query) { if (query !== '') { this.filterMenu(query); } else { this.filteredMenus = []; } }, filterMenu(query) { this.filteredMenus = this.allMenus.filter(item => { const nameMatch = item.name.includes(query); const pinyinMatch = PinyinMatch.match(item.name, query); return nameMatch || (pinyinMatch && pinyinMatch !== false); }); }, async handleSelectChange(pageCode) { if (!pageCode) { this.resetForm(); return; } console.log('e', this.selectedItem, pageCode); try { const result = await this.$http.post( 'GW_QRY_HOME_BUSIHOME_QRYHALLFUNCBASEINFO', { pageCode: pageCode }, ); console.log('返回result',result) this.formData = this.transformData(result); } catch (error) { console.error('获取菜单配置失败:', error); } }, transformData(rawData) { delete rawData.retCode; delete rawData.retMessage; return { ...rawData, opSource: rawData.opSource === '1' ? '业务大厅' : '网格通', enabled: rawData.upvoteState === 'A', expireDate: rawData.expireDate.replace('.0', ''), effectiveDate: rawData.effectiveDate.replace('.0', ''), createDate: rawData.createDate.replace('.0', ''), }; }, resetForm() { this.formData.effectiveDate = ''; this.formData.expireDate = ''; this.formData.enabled = ''; }, async saveForm() { if (!this.formData.pageCode) { this.$message.warning('请先选择菜单'); return; } try { console.log('传来的数据表单:', this.formData); let data = { ...this.formData, opSource: '1', upvoteState: this.formData.enabled ? 'A' : 'C' } delete data.enabled; console.log('保存的数据data:', data); await this.$http.post('GW_DEAL_HOME_BUSIHOME_SAVEBASEINFO', data); this.$message({ message: '保存成功', type: 'success', }); } catch (error) { this.$message({ message: '保存失败', type: 'warning', }); } }, }, }; </script> <style scoped> .search-form-container { max-width: 800px; margin: 20px auto; padding: 20px; border: 1px solid #ebeef5; border-radius: 4px; } .form-container { margin-top: 20px; } .form-actions { display: flex; justify-content: flex-end; margin-top: 20px; } </style> 以上述代码为基础，实现整个页面的样式优化，最好表单一行内三列，冒号对齐

vue el-input 设置必输