console
var app4 = new Vue({
el: '#app-4',
data: {
opData: [
{ name: '王毅', id: 1 },
{ name: '李二', id: 2 },
{ name: '张武', id: 3 },
{ name: '四平', id: 4 },
{ name: '吉林', id: 5 },
{ name: '天山', id: 6 },
{ name: '如来', id: 7 }
],
selectData: [],
value01: ''
},
computed: {
filterOpData() {
let getSels = []
this.selectData.map(item => {
item.Select && getSels.push(item.Select)
})
return this.opData.filter(item => {
getSels.includes(item.id) && (item.disabled = true)
return true
})
}
},
directives: {
debunce: {
inserted: (el, binding) => {
el.addEventListener('click', () => {
console.log('add click')
el.classList.add('is-disabled');
el.disabled = true;
setTimeout(() => {
el.disabled = false;
el.classList.remove('is-disabled');
}, binding.value)
})
}
}
},
methods: {
add: function () {
this.selectData.push({ Select: '' });
},
del: function (index) {
this.selectData.splice(index, 1);
},
fangdou() {
console.log('防抖')
}
}
})
<div id="app-4">
{{opData}}
<br/>
length:{{opData.length}}
<div v-for="(item,index) in selectData" :key="index">
<el-select class="select_css" v-model="item.Select">
<el-option v-for="itm in filterOpData" :key="itm.id" :value="itm.id" :label="itm.name" :disabled="itm.disabled"></el-option>
</el-select>
<button @click="del(index)">删除</button>
</div>
<div style="margin-top:10px">
<button @click="add">新增一条</button>
</div>
<el-button v-debunce="300" @click="fangdou">防抖</el-button>
</div>
.select_css{
width: 10rem;
height: 30px;
border-radius: 5px;
margin: 5px 20px;
padding: 5px;
}