vue中input多选_vue实现下拉多选vue实现多选下拉框

效果展示

image.png下拉组件

∨

//下拉列表

• { {item.Name}}

data() {

return {

checkedData: [], //选中的数据

isShow: false, //下拉列表是否显示

selectCon: "", //选中的内容

};

},

props: ["liData"],

点击空白处隐藏下拉列表

mounted() {

let that = this;

//点击页面空白处隐藏下拉列表

document.addEventListener("click", function() {

that.isShow = false;

});

},

控制下拉列表的显示隐藏

methods: {

//控制下拉列表的显示隐藏

liShow() {

this.isShow = true;

},

子组件的数据的监听和操作

watch: {

liData: {

handler(newVal, oldVal) {

//选中数据

this.checkedData