<el-form-item> <div style="margin-top:20px;" label="禁用启用" prop="xoilEnableMark"> <el-switch v-model="item.xoilEnableMark" active-color="#13ce66" inactive-color="#ff4949" active-value={1} inactive-value={0} > </el-switch> </div> </el-form-item>实现启用禁用
时间: 2024-03-29 09:39:21 浏览: 104
这段代码是一个基于 Element UI 的表单项,包括一个开关。通过该开关可以实现启用和禁用功能。
具体来说:
- v-model 指定了该开关绑定的变量,即 item.xoilEnableMark。
- active-color 和 inactive-color 分别指定了开启和关闭状态下的颜色。
- active-value 和 inactive-value 分别指定了开启和关闭状态下的值。
如果 item.xoilEnableMark 的值为 1,则开关为开启状态,反之则为关闭状态。你可以在代码中对 item.xoilEnableMark 进行修改以实现启用禁用功能。
相关问题
<div v-if="!forgetPwd"> <!-- 账号密码登录 --> <div v-if="form.type == '1'"> <el-form-item label="账号" prop="username"> <el-input v-model="form.username"/> </el-form-item> <el-form-item label="密码" prop="password"> <el-input type="password" v-model="form.password"/> </el-form-item> </div> <!-- 手机验证码登录 --> <div v-if="form.type == '2'"> <el-form-item label="手机号码" prop="phoneNumber"> <el-input v-model="form.phoneNumber"/> </el-form-item> <el-form-item label="验证码" prop="code"> <el-input v-model="form.code" placeholder="请输入验证码"> <el-button slot="append" @click="sendSms" :disabled="codeDisabled">{{ codeText }}</el-button> </el-input> </el-form-item> </div> <el-form-item> <el-button type="primary" @click="submit" :loading="load" style="width: 100%">{{ loginText }}</el-button> <el-button type="text" @click="forget">忘记密码?</el-button> <el-button type="text" @click="clickPhone">手机验证码登录</el-button> </el-form-item> </div>分析
这是一个使用 Vue.js 框架开发的登录页面,根据用户选择的登录方式,展示对应的输入框和按钮。用户可以选择使用账号密码登录或者使用手机验证码登录。如果用户选择手机验证码登录,则会展示输入手机号码和验证码的输入框,并且可以点击发送验证码按钮。在页面的最下方,还提供了忘记密码和手机验证码登录的链接按钮。其中,form 是一个对象,用于存储用户输入的登录信息,例如用户名、密码、手机号码和验证码等。submit 方法是提交登录信息的函数,sendSms 方法是发送验证码的函数。codeDisabled 和 codeText 是计算属性,用于控制发送验证码按钮的状态和文本。
<div class="main-container"> <el-card class="form-card"> <template #header> <span>添加新矿石</span> </template> <el-form ref="form" :model="formData" label-width="120px"> <el-form-item label="矿石名称" prop="name"> <el-input v-model="formData.name"></el-input> </el-form-item> <el-form-item label="描述" prop="desc"> <el-input v-model="formData.desc"></el-input> </el-form-item> <el-form-item label="分类" prop="category"> <el-input v-model="formData.category"></el-input> </el-form-item> <el-form-item label="具体信息" prop="additional_info"> <el-input v-model="formData.additional_info"></el-input> </el-form-item> <el-form-item label="发现地点" prop="location"> <el-input v-model="formData.location"></el-input> </el-form-item> <el-form-item label="图片" prop="image"> <input type="file" @change="handleFileChange" /> </el-form-item> <el-form-item> <el-button type="primary" @click="submitForm">提交</el-button> </el-form-item> </el-form> </el-card> </div>什么意思
这是一个使用了 Element UI 组件库的 Vue.js 组件,它显示了一个表单,用于添加新的矿石。表单包括矿石名称、描述、分类、具体信息、发现地点和图片等字段。用户可以填写这些信息,并在点击提交按钮后将表单数据提交到后台进行处理。其中,图片字段使用了 HTML5 的 input 标签,允许用户选择本地的一个文件作为图片。
阅读全文