当 element-Ui 中el-select选择器选中一个值,其余选项全部高亮,解决方法

博客介绍了JavaScript里的相关操作,包括设置value-key='kid'实现当前高亮选中,在change方法中绑定$event传参以选中对象,并在selSiteLocation方法获取,还提及了:value-key=\'kid'\和:key=\item.kid\关键配置。

value-key="kid"设置,选中当前高亮

change方法中绑定$event传参,可以选中这个对象,并在selSiteLocation方法中取到,注意其中的

:value-key="'kid'" :key="item.kid" 关键配置

<el-select
  class="site-select"
  value-key="kid"
  v-model="formData.siteLocation"
  placeholder="请选择场地"
  @change="selSiteLocation($event)">
  <el-option
    v-for="item in siteLists"
    :value-key="'kid'"
    :key="item.kid"
    :label="item.siteName"
    :value="item">
    <span style="float: left">{{ item.siteName }}</span>
    <span style="float: right; color: #8492a6; font-size: 13px">{{ item.pactName }}</span>
  </el-option>
</el-select>

<think>我们注意到用户之前的问题是关于“使用Element-UI生成竖着的列表的方法”。结合引用内容,我们可以这样理解: 用户想要的是纵向排列的表单或列表,而不是横向的表格。在Element-UI中,常见的纵向列表形式有两种: 1. 使用`el-form`组件,它默认是垂直布局(label在上,内容在下,纵向排列)。 2. 使用`el-descriptions`描述列表组件,它可以实现纵向的列表展示。 根据引用[3]中提到的,element-ui的form表单默认垂直分布,所以我们可以使用`el-form`来创建纵向列表。 另外,引用[4]提到了级联选择器,但这不是用户需要的。 因此,我们提供两种方法方法一:使用`el-form`组件创建纵向列表 特点:每个表单项独立一行,标签在左,内容在右(或标签在上,内容在下)。 方法二:使用`el-descriptions`描述列表(Element UI 2.15.0版本引入) 特点:用于展示多个字段的列表,类似于描述列表。 由于用户没有指定Element UI版本,我们同时提供两种方案,并说明适用场景。 具体实现: 方法一:el-form 垂直表单 默认就是垂直的,但也可以设置label-position为top,让标签在表单项上方。 示例代码: ``` <template> <el-form :model="form" label-width="80px"> <el-form-item label="姓名"> <el-input v-model="form.name"></el-input> </el-form-item> <el-form-item label="年龄"> <el-input v-model="form.age"></el-input> </el-form-item> <el-form-item label="性别"> <el-radio-group v-model="form.gender"> <el-radio label="男"></el-radio> <el-radio label="女"></el-radio> </el-radio-group> </el-form-item> </el-form> </template> <script> export default { data() { return { form: { name: '', age: '', gender: '' } }; } }; </script> ``` 方法二:el-descriptions 描述列表(适用于展示数据,而不是编辑) 如果需要展示只读的纵向列表,可以使用描述列表。 示例代码: ``` <template> <el-descriptions title="用户信息" border> <el-descriptions-item label="姓名">张三</el-descriptions-item> <el-descriptions-item label="年龄">25</el-descriptions-item> <el-descriptions-item label="性别">男</el-descriptions-item> </el-descriptions> </template> ``` 注意:`el-descriptions`在Element UI 2.15.0及以上版本支持。 如果用户使用的是较旧版本,可以使用`el-row`和`el-col`来模拟,或者使用`el-table`并设置一列,但这样比较麻烦。 因此,根据用户需求,我们推荐: 1. 如果需要表单编辑,使用`el-form`。 2. 如果只是展示数据,使用`el-descriptions`(版本支持的情况下)。 另外,引用[1]提到了Element-UI的基本使用,引用[2]提到了如何全局引入Element-UI。 最后,我们生成相关问题: </think> # Element-UI 垂直列表实现方法详解 在 Element-UI 中创建垂直列表有两种主要方式:使用表单组件(`el-form`)或描述列表组件(`el-descriptions`)。下面我将详细介绍这两种方法及其应用场景。 ## 方法一:使用 el-form 创建垂直列表 `el-form` 组件默认垂直布局,是创建垂直列表最常用的方式: ```html <template> <div class="vertical-list-container"> <el-form label-width="120px" :model="formData" label-position="top" <!-- 标签在上方 --> > <el-form-item label="用户名" prop="username"> <el-input v-model="formData.username" placeholder="请输入用户名"></el-input> </el-form-item> <el-form-item label="电子邮箱" prop="email"> <el-input v-model="formData.email" placeholder="请输入邮箱"></el-input> </el-form-item> <el-form-item label="用户角色" prop="role"> <el-select v-model="formData.role" placeholder="请选择角色"> <el-option label="管理员" value="admin"></el-option> <el-option label="编辑" value="editor"></el-option> <el-option label="访客" value="guest"></el-option> </el-select> </el-form-item> <el-form-item label="用户状态" prop="status"> <el-switch v-model="formData.status" active-text="激活" inactive-text="停用" active-value="active" inactive-value="inactive"> </el-switch> </el-form-item> <el-form-item label="个人简介" prop="bio"> <el-input type="textarea" v-model="formData.bio" :rows="3" placeholder="请输入个人简介" ></el-input> </el-form-item> </el-form> </div> </template> <script> export default { data() { return { formData: { username: '', email: '', role: '', status: 'active', bio: '' } } } } </script> <style> .vertical-list-container { max-width: 600px; margin: 20px auto; padding: 20px; border: 1px solid #ebeef5; border-radius: 4px; box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); } .el-form-item { margin-bottom: 20px; } </style> ``` ### 关键特性 - **垂直布局**:默认垂直排列表单项 - **标签位置**:`label-position` 控制标签位置(top/left/right) - **响应式设计**:自动适应不同屏幕尺寸 - **表单验证**:支持复杂验证规则[^3] ## 方法二:使用 el-descriptions 创建只读垂直列表 对于纯展示型垂直列表,`el-descriptions` 是更好的选择: ```html <template> <div class="vertical-list-container"> <el-descriptions title="用户信息" border :column="1" > <el-descriptions-item label="用户名">张三</el-descriptions-item> <el-descriptions-item label="电子邮箱">zhangsan@example.com</el-descriptions-item> <el-descriptions-item label="用户角色"> <el-tag>管理员</el-tag> </el-descriptions-item> <el-descriptions-item label="账号状态"> <el-tag type="success">已激活</el-tag> </el-descriptions-item> <el-descriptions-item label="个人简介"> 高级系统管理员,负责系统架构设计和安全策略制定 </el-descriptions-item> </el-descriptions> </div> </template> <style> .vertical-list-container { max-width: 600px; margin: 20px auto; } </style> ``` ### 关键特性 - **纯展示**:适用于只读数据展示 - **边框选项**:`border` 属性添加边框 - **列控制**:`column` 属性设置列数(设置为1即为垂直列表) - **标签与内容分离**:清晰的标签-对显示 ## 方法三:组合使用 el-row 和 el-col 对于更复杂的布局需求,可以组合使用栅格系统: ```html <template> <div class="vertical-list-container"> <el-row :gutter="20"> <el-col :span="24"> <div class="list-item"> <span class="label">用户名:</span> <span class="value">李四</span> </div> </el-col> <el-col :span="24"> <div class="list-item"> <span class="label">邮箱:</span> <span class="value">lisi@example.com</span> </div> </el-col> <el-col :span="24"> <div class="list-item"> <span class="label">角色:</span> <span class="value"> <el-tag type="info">编辑</el-tag> </span> </div> </el-col> </el-row> </div> </template> <style> .list-item { padding: 12px 0; border-bottom: 1px solid #ebeef5; display: flex; } .label { width: 100px; font-weight: bold; color: #606266; } .value { flex: 1; } </style> ``` ## 最佳实践建议 1. **表单场景优先** - 需要用户输入时使用 `el-form` - 添加表单验证规则确保数据完整性 2. **纯展示场景** - 使用 `el-descriptions` 展示只读数据 - 添加 `border` 属性增强可读性 3. **响应式设计** - 在小屏幕上保持单列布局 - 在大屏幕上可考虑多列布局 4. **样式优化** - 添加适当的间距和分割线 - 使用标签高亮重要信息 - 应用一致的配色方案 ## 完整示例:用户资料编辑页面 ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Element-UI 垂直列表示例</title> <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script> <script src="https://unpkg.com/element-ui/lib/index.js"></script> <style> body { background-color: #f5f7fa; padding: 20px; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; } .container { max-width: 800px; margin: 0 auto; } .card { background: #fff; border-radius: 8px; box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); margin-bottom: 20px; overflow: hidden; } .card-header { padding: 18px 20px; border-bottom: 1px solid #ebeef5; background-color: #f8f9fa; } .card-body { padding: 20px; } .section-title { margin: 25px 0 15px; padding-bottom: 10px; border-bottom: 1px solid #ebeef5; color: #409EFF; font-weight: 500; } .action-bar { margin-top: 20px; text-align: center; } .avatar-container { display: flex; align-items: center; margin-bottom: 20px; } .avatar { width: 80px; height: 80px; border-radius: 50%; background-color: #eee; display: flex; align-items: center; justify-content: center; margin-right: 20px; color: #909399; font-size: 12px; } .custom-label { display: block; margin-bottom: 8px; font-weight: bold; color: 606266; } </style> </head> <body> <div id="app" class="container"> <h1 style="text-align: center; color: #409EFF; margin-bottom: 30px;">用户资料管理</h1> <div class="card"> <div class="card-header"> <h2>基本信息</h2> </div> <div class="card-body"> <el-form :model="formData" label-width="120px" label-position="top" :rules="rules" ref="userForm" > <div class="avatar-container"> <div class="avatar">用户头像</div> <el-button type="primary" size="small">上传头像</el-button> </div> <el-row :gutter="20"> <el-col :span="12"> <el-form-item label="用户名" prop="username"> <el-input v-model="formData.username"></el-input> </el-form-item> </el-col> <el-col :span="12"> <el-form-item label="真实姓名" prop="realname"> <el-input v-model="formData.realname"></el-input> </el-form-item> </el-col> </el-row> <el-form-item label="电子邮箱" prop="email"> <el-input v-model="formData.email"></el-input> </el-form-item> <el-form-item label="手机号码" prop="phone"> <el-input v-model="formData.phone"></el-input> </el-form-item> <el-form-item label="个人简介" prop="bio"> <el-input type="textarea" v-model="formData.bio" :rows="3" placeholder="请介绍一下自己..." ></el-input> </el-form-item> </el-form> </div> </div> <div class="card"> <div class="card-header"> <h2>账号信息</h2> </div> <div class="card-body"> <el-form :model="formData" label-width="120px" label-position="top" > <el-form-item label="用户角色"> <el-select v-model="formData.role" style="width: 100%"> <el-option label="系统管理员" value="admin"></el-option> <el-option label="内容编辑" value="editor"></el-option> <el-option label="普通用户" value="user"></el-option> </el-select> </el-form-item> <el-form-item label="账号状态"> <el-switch v-model="formData.status" active-text="激活" inactive-text="禁用" active-value="active" inactive-value="inactive"> </el-switch> </el-form-item> <el-form-item label="注册时间"> <el-input :value="formData.createTime" disabled></el-input> </el-form-item> <el-form-item label="最后登录"> <el-input :value="formData.lastLogin" disabled></el-input> </el-form-item> </el-form> </div> </div> <div class="card"> <div class="card-header"> <h2>用户标签</h2> </div> <div class="card-body"> <div class="custom-label">技能标签</div> <div> <el-tag style="margin-right: 10px;">Vue.js</el-tag> <el-tag style="margin-right: 10px;" type="success">Element-UI</el-tag> <el-tag style="margin-right: 10px;" type="info">JavaScript</el-tag> <el-tag style="margin-right: 10px;" type="warning">CSS3</el-tag> <el-tag style="margin-right: 10px;" type="danger">Node.js</el-tag> </div> </div> </div> <div class="action-bar"> <el-button type="primary" @click="saveForm">保存信息</el-button> <el-button>取消</el-button> </div> </div> <script> new Vue({ el: '#app', data() { return { formData: { username: 'zhangsan', realname: '张三', email: 'zhangsan@example.com', phone: '13800138000', bio: '前端开发工程师,专注于Vue技术栈', role: 'admin', status: 'active', createTime: '2023-06-01 14:30:22', lastLogin: '2023-10-15 09:15:47' }, rules: { username: [ { required: true, message: '请输入用户名', trigger: 'blur' }, { min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur' } ], email: [ { required: true, message: '请输入邮箱地址', trigger: 'blur' }, { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] } ], phone: [ { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur' } ] } } }, methods: { saveForm() { this.$refs.userForm.validate((valid) => { if (valid) { this.$message.success('用户信息保存成功'); // 这里添加实际保存逻辑 } else { this.$message.error('请检查表单数据'); return false; } }); } } }); </script> </body> </html> ``` ## 关键实现技巧 1. **布局控制**: - 使用 `label-position="top"` 实现标签在输入框上方的布局 - 通过 `el-row` 和 `el-col` 创建响应式网格 2. **表单验证**: - 使用 `rules` 属性定义验证规则 - 支持多种验证类型(必填、长度、正则等) 3. **样式优化**: - 卡片式设计增强视觉层次感 - 合理使用间距和分割线提升可读性 - 标签颜色统一保持视觉一致性 4. **交互设计**: - 表单提交前进行完整验证 - 提供明确的反馈消息 - 禁用状态字段明确标识 ## 何时选择哪种方案 | **场景** | **推荐组件** | **优势** | |---------|------------|---------| | 表单输入 | `el-form` | 内置验证、丰富的表单控件 | | 数据展示 | `el-descriptions` | 简洁的键对展示、边框选项 | | 复杂布局 | `el-row` + `el-col` | 灵活响应式、自定义程度高 | 以上三种方法都能创建垂直列表,根据具体需求选择最合适的方式即可[^1][^2]。
评论 3
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值