最近的項目大量的使用了elementUI+vue這種模式。所以寫下一些心得，希望能幫助到看到這篇文章的可愛的你。

此文章默認你已經(jīng)有vue搭建并會使用的基礎。木有的話，請先看看vue吧
vue官方文檔指路鏈接（點擊）
elementUI官方文檔指路鏈接（點擊）

好，廢話不多說，讓我們開始講閑話！額，是講正文。。。。

涉及功能點

• input的禁止輸入聯(lián)動
• select功能的使用
• vue-watch的使用
• v-for的使用
• vue數(shù)據(jù)的雙向綁定

項目上的應用場景

1、點擊按鈕后禁止輸入

效果圖


代碼

<template>
 <div>
      <el-button type="primary" @click="InputDisabled">示例1禁止輸入</el-button>
      <el-button type="primary" @click="InputDisabledClear">示例1禁止輸入并清空輸入值</el-button>
      <div>
        <el-input class="width100"  placeholder="示例1" v-model="input.one" :disabled="disabled.one"  >
      </el-input>
      </div>
</template>
<script>
  export default {
    name: "index",
    data: () => ({
      input: { one: "", },
      disabled: { one: false, },
    }),

    methods: {
      InputDisabled() {
        this.disabled.one = true;
      },
      InputDisabledClear(){
        this.disabled.one = true;
        //直接將值清空
        this.input.one="";
      }
    },
  }
</script>

2、根據(jù)值的變化，禁止輸入

比如選擇某個select的值的時候，禁止某項input輸入。多應用于表單輸入的聯(lián)動。

效果圖

2.gif

注意

1、在監(jiān)聽的時候一定要深度監(jiān)聽deep: true
2、為了能更好的遍歷數(shù)據(jù)，我使optionsect的value值和disabled的key名保持一致。

（實際項目中最好將value和key的名字起的都有意義并且操作方便一些比較好）

代碼
為了方便觀看貼的局部

//html
 <div>
      <el-select v-model="value" placeholder="請選擇">
        <el-option  v-for="item in options" :key="item.value"
          :label="item.label" :value="item.value">
        </el-option>
      </el-select>
        <el-input class="width100" placeholder="示例1" v-model="input.one" :disabled="disabled.one"></el-input>
        <el-input class="width100" placeholder="示例2" v-model="input.two" :disabled="disabled.two"></el-input>
        <el-input class="width100" placeholder="示例3" v-model="input.three" :disabled="disabled.three"></el-input>
    </div>

//js
<script>
  export default {
    name: "index",
    data: () => ({
      value: "",
      input: {one: "", two: "",three: "", },
      disabled: { one: false, two: false, three: false, },
      options: [{ value: 'one',  label: "禁止示例1"},
        {value: 'two',label: "禁止示例2"}, 
        {value: 'three',label: "禁止示例3"}, 
        {value: 'reset', label: "重置" }]
    }),
    watch: {
      value: {
        handler(newValue, oldValue) {
          let _this =this;
          if(newValue==='reset'){
            //遍歷置灰數(shù)組，將值全部置為false
            Object.keys(_this.disabled).forEach(function (i) {
              _this.disabled[i] = false
            });
            return
          }
          //將對應的置灰數(shù)組，置為true
            this.disabled[newValue]=true;
        }, deep: true,
      }
    }
  }
</script>

好了，暫時寫到這里
此文不定期更新，有其它input用法想了解的可以留言喲~