在我们开发中，就表单而言，经常有
查看表单
的操作。有时候为了省事情，我们直接给表单的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
更改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
>
<
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
>
复制代码
