elementui通过 disabled 属性指定是否禁用 input 组件,如何用DOM操作取消disabled 属性...

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>通过 disabled 属性指定是否禁用 input 组件title>
    <link rel="stylesheet" href="elementui/elementui.css">
head>
<body>
    <div id="app">
        <el-dialog title="收货地址" :visible.sync="dialogFormVisible">
            <el-form :model="form">
              <el-form-item label="活动名称" :label-width="formLabelWidth">
                <el-input v-model="form.name" auto-complete="off"  :disabled="true" class="input">el-input>
              el-form-item>
              <el-form-item label="活动区域" :label-width="formLabelWidth">
                <el-select v-model="form.region" placeholder="请选择活动区域">
                  <el-option label="区域一" value="shanghai">el-option>
                  <el-option label="区域二" value="beijing">el-option>
                el-select>
              el-form-item>
            el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="dialogFormVisible = false">取 消el-button>
              <el-button type="primary" @click="cancelAttr">确 定el-button>
            div>
          el-dialog>
    div>
    
body>
<script type="text/javascript" src="vue/vue.min.js">script>
<script type="text/javascript" src="elementui/elementui.js">script>
<script type="text/javascript">
  new Vue({
        el:'#app',
        data(){
            return{
                dialogFormVisible: true,
                form: {
                  name: '',
                  region: '',
                  date1: '',
                  date2: '',
                  delivery: false,
                  type: [],
                  resource: '',
                  desc: ''
                },
                formLabelWidth: '120px'
            }
        },
        mounted(){
          
        },
        methods:{
         
          //点击确定的时候取消属性
          cancelAttr(){
              //1.首先我们要拿到input的父class(input)
                 //当我们设置disabled属性的时候,父集的class设置成 input el-input is-disabled,首先我们改变父集的class,把父集改成可编辑状态,才能修改input的属性
              const parent = document.querySelector(".input");
              parent.className = "input el-input ";//改变父集的class,把父集改成可编辑状态,
              //2.在设置input属性
                  //获取input
              const input = document.querySelector(".input input");
                  //设置input的属性为false
                  input.disabled = false;
          }
        }
    })
script>
html>

 

elementui通过 disabled 属性指定是否禁用 input 组件,有时候我们会取消单个disabled 属性,那我们如何用DOM操作取消disabled 属性,下面是我走的一下弯路,供大家参考一下,避免再走这样的弯路

 

转载于:https://www.cnblogs.com/wenxinsj/p/7460420.html

你可能感兴趣的:(elementui通过 disabled 属性指定是否禁用 input 组件,如何用DOM操作取消disabled 属性...)