前言:
今天小伙伴们对“radiobutton控件默认选中”大体比较关切,大家都需要知道一些“radiobutton控件默认选中”的相关文章。那么小编在网摘上搜集了一些关于“radiobutton控件默认选中””的相关内容,希望看官们能喜欢,大家快快来学习一下吧!问题描述
在我们开发中,就表单而言,经常有查看表单的操作。有时候为了省事情,我们直接给表单的el-input或者el-radio或者el-select以及的el-button等加上一个disabled禁用属性,这样的话,就不能编辑操作,不能点击保存了。
但是这样做是不安全的。按钮最好不渲染,同时按钮点击回调函数中最好加上js的逻辑检验控制。
我们先看一下示例图,假设我们有这样一个表单,只能查看,不能修改
这里虽然有按钮,但是是禁用状态的,点不了。看着貌似很安全,实际不然!。不过接下来,我们就使用浏览器自带的$0去修改这个已经禁用的表单和按钮
什么是$0
$0就是浏览器开发者工具当前选中的元素
第一步,我们F12打开开发者工具第二步,我们在元素面板中随便选中一个元素,看看元素尾部这个$0第三步,我们在Console控制台去输入这个$0,并回车,就可以获取这个dom元素了。能获取dom元素,自然就能修改dom元素
通过以上案例,我们发现$0的确是:就是浏览器开发者工具当前选中的元素。此外,还有$1、$2、$3、$4这样,就是代表之前选中的元素。不过一般使用的较少。这里不赘述
更改禁用的form表单项和按钮
上图我们可以看到,原有的数据值为:
姓名:孙悟空、性别:男、家乡:花果山水帘洞
我们将其修改成:
姓名:白骨精、性别:女、家乡:白虎岭白骨洞
家乡是下拉框,就是改一下,选择别的下拉框即可。
我们依然是通过$0去操作dom,只需要更改其的disabled属性为false,就行了,就解除禁用了
更改禁用的输入框
审查元素,找到输入框的$0
2. 更改disabled属性为false
也可以$0.value = '白骨精' 不过这种方式,页面上的数据会发生变化,但是点击保存按钮的时候不会发生变化,还是原来的数据。可以通过js框架开发工具查看。要手动在输入框中更改,才会变化生效
更改禁用的单选框和下拉框
篇幅原因,这里不赘述了。留给各位读者使用$0自己尝试叭...
更改禁用按钮
上面我们使用$0更改了输入框的值,单选框的值,和下拉框的值。最后我们将禁用的按钮,解除禁用,这样的话,就可以点击保存走接口了,于是,这个不能修改的数据就被修改了。哈哈。看下图:
通过$0的一波操作,我们发现了,表单数据被我们修改了,同时按钮也可以点击了。这样对数据的安全就有一定的风险!那么怎么办呢?
所以建议:
1. 保存按钮要么渲染,要么就不渲染。最好不要禁用。 2. 如果某些特定场景下,的确必须要渲染保存按钮,且得使用disabled属性,那么就在保存按钮点击的回调中,加入符合业务场景的js校验逻辑 3. 后端最好也做一下符合业务场景的逻辑控制,符合对应业务场景,才去把数据写入数据库 4. 加入操作日志功能。能够硕源,保证能通过日志找到有问题的数据是谁干的,或者进行精细化排查 5. 这篇文章,千万不要被测试同学看到,要不然...
$0的操作,在某些网页上能够发挥很不错的效果。大家可以多试试 ^_^
代码附上
这代码也没啥,不过为了方便大家使用$0调试。还是附上吧。反正dom能够怎么玩,同样的方式$0也可以怎么玩
<template> <div class="box"> <h2>查看数据</h2> <br /> <el-form style="width: 320px" ref="form" :model="form" label-width="80px"> <el-form-item label="姓名"> <el-input disabled v-model="form.name"></el-input> </el-form-item> <el-form-item label="性别"> <el-radio-group disabled v-model="form.gender"> <el-radio label="男"></el-radio> <el-radio label="女"></el-radio> </el-radio-group> </el-form-item> <el-form-item label="家乡"> <el-select disabled v-model="form.home" placeholder="请选择活动区域"> <el-option label="花果山水帘洞" value="花果山水帘洞"></el-option> <el-option label="白虎岭白骨洞" value="白虎岭白骨洞"></el-option> </el-select> </el-form-item> <el-form-item> <el-button disabled type="primary" @click="saveData" >立即创建</el-button > <el-button>取消</el-button> </el-form-item> </el-form> </div></template> <script>export default { data() { return { form: { name: "孙悟空", gender: "男", home: "花果山水帘洞", }, }; }, methods: { saveData() { console.log("保存数据啦", this.form); }, },};</script><style scoped lang="less">.box { width: 100%; height: 100%; box-sizing: border-box; padding: 36px;}</style>
标签: #radiobutton控件默认选中