SOURCE

console 命令行工具 X clear

                    
>
console
// 定义一个名为 button-counter 的新组件

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
            })
        }
    },
    // el-button 防抖
    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('防抖')
        }
    }
})

// console.log('JS简易工具欢迎你');
<div id="app-4">
	<!-- <el-select class="select_css" v-model="value01">
		<el-option v-for="item in opData" :key="item.id" :value="item.id" :label="item.name" :disabled="item.disabled"></el-option>
	</el-select> -->
{{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;
}

本项目引用的自定义外部资源