elementUI設(shè)置input的只讀或禁用的方法-創(chuàng)新互聯(lián)

只讀：readonly

創(chuàng)新互聯(lián)建站從2013年開始，是專業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司，擁有項目成都做網(wǎng)站、網(wǎng)站制作網(wǎng)站策劃，項目實施與項目整合能力。我們以讓每一個夢想脫穎而出為使命，1280元永泰做網(wǎng)站,已為上家服務(wù),為永泰各地企業(yè)和個人服務(wù),聯(lián)系電話:13518219792

在data里定義：readonly: true,
然后在input框里加上readonly就可以了。

禁用：disabled

在data里定義：edit: true,
然后在input框里加上：:disabled="edit"就可以了

PS：下面看下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" rel="external nofollow" >
</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="活動區(qū)域" :label-width="formLabelWidth">
        <el-select v-model="form.region" placeholder="請選擇活動區(qū)域">
         <el-option label="區(qū)域一" value="shanghai"></el-option>
         <el-option label="區(qū)域二" 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)
         //當我們設(shè)置disabled屬性的時候，父集的class設(shè)置成 input el-input is-disabled，首先我們改變父集的class,把父集改成可編輯狀態(tài)，才能修改input的屬性
       const parent = document.querySelector(".input");
       parent.className = "input el-input ";//改變父集的class,把父集改成可編輯狀態(tài)，
       //2.在設(shè)置input屬性
         //獲取input
       const input = document.querySelector(".input input");
         //設(shè)置input的屬性為false
         input.disabled = false;
     }
    }
  })
</script>
</html>

當前名稱：elementUI設(shè)置input的只讀或禁用的方法-創(chuàng)新互聯(lián)
網(wǎng)站URL：http://muchs.cn/article34/cdsdse.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供小程序開發(fā)、面包屑導(dǎo)航、品牌網(wǎng)站制作、Google、網(wǎng)站設(shè)計公司、網(wǎng)站內(nèi)鏈

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容