最近的项目大量的使用了elementUI+vue这种模式。所以写下一些心得，希望能帮助到看到这篇文章的可爱的你。
此文章默认你已经有vue搭建并会使用的基础。木有的话，请先看看vue吧
vue官方文档指路链接（点击）
elementUI官方文档指路链接（点击）
好，废话不多说，让我们开始讲闲话！额，是讲正文。。。。
涉及功能点
- input的禁止输入联动
- select功能的使用
- vue-watch的使用
- v-for的使用
- vue数据的双向绑定
项目上的应用场景
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、根据值的变化，禁止输入
比如选择某个select的值的时候，禁止某项input输入。多应用于表单输入的联动。
效果图
2.gif
注意
1、在监听的时候一定要深度监听
deep: true
2、为了能更好的遍历数据，我使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'){
//遍历置灰数组，将值全部置为false
Object.keys(_this.disabled).forEach(function (i) {
_this.disabled[i] = false
});
return
}
//将对应的置灰数组，置为true
this.disabled[newValue]=true;
}, deep: true,
}
}
}
</script>
好了，暂时写到这里
此文不定期更新，有其它input用法想了解的可以留言哟~
