原创：关于点击按钮el-form内的某块内容禁用

我这里使用的市给el-form内添加布局样式  (   el-row  (  el-col  )  )

思路:用el-col调整好el-form内的布局后给需要禁用的内容外层套上一层el-col然后进行样式绑定

模板案例代码

<el-col :class="oneCol === true ? 'oneCCol':'ccol'" id="one">
<el-col :span="12">
  <el-form-item label="活动数据类型" >
    <el-select v-model="form.type" placeholder="请选择活动数据类型" style="width: 100%;">
      <el-option label="农、林、牧、渔业" value="农、林、牧、渔业"></el-option>
      <el-option label="采矿业" value="采矿业"></el-option>
      <el-option label="制造业" value="制造业"></el-option>
      <el-option label="电力、热力、燃气、及水生产和供应业" value="电力、热力、燃气、及水生产和供应业"></el-option>
      <el-option label="交通运输、仓储和邮政业" value="交通运输、仓储和邮政业"></el-option>
      <el-option label="批发零售、住宿餐饮业" value="批发零售、住宿餐饮业"></el-option>
      <el-option label="其他" value="其他"></el-option>
      <el-option label="居民生活" value="居民生活"></el-option>
    </el-select>
  </el-form-item>
</el-col>
<el-col :span="12">
  <el-form-item label="排放时间">
    <el-date-picker type="date" placeholder="选择日期" v-model="form.date" style="width: 100%;" ></el-date-picker>
  </el-form-item>
</el-col>
<el-col>
  <el-form-item label="企业组织" prop="organizationName">
    <!--            <el-input v-model="form.organizationName" :disabled="true"></el-input>-->
    <el-cascader
      v-model="form.organizationName"
      :options="organizationNameData"
      style="width: 100%"
      :props="{ checkStrictly: true }"
      @change="handleOrganizationChange"></el-cascader>
  </el-form-item>
</el-col>
<el-col>
  <el-form-item label="具体描述">
    <el-input v-model="form.description" type="textarea" :autosize="{minRows:3}"></el-input>
  </el-form-item>
</el-col>
</el-col>
<el-col>
  <el-divider></el-divider>
</el-col>

css代码是

// 设定层级高z-index设定层级背景色透明度

.oneCCol{
  pointer-events: none;
  background: white;
  z-index: 20;
  opacity: 0.5;
}
// 给最外层el-col左边加上一个条状装饰
.ccol{
  border-width: 0 0 0 5px;
  border-style: solid;
  border-color: #b7e075;
}

附上：点击触发页面滚轮滑动到定位的位置代码

// 根据id使用scrollIntoView()的动画效果滑动到指定的元素id处

// block显示内容在屏幕位置

// 动画效果这里我使用的是js内置的 id使用的是模板案例代码上元素的id

document.getElementById('one').scrollIntoView({ behavior: "smooth", block: 'center' });