先看效果图
全选:
没有选中时:
选中部分:
作者项目使用的是vue3
写法,如果是vue2的自己转换一下
html代码:
js代码:
拓展
另一种方法,如果不想使用勾选框,可以试试下面的方法
还是推荐第一种写法,比较简单,如果使用这种的可以参考一下,思路是这样的
const selectAll = () => {form.fileTypes = []if (form.fileTypes.length < fileTypeList.length) {fileTypeList.map((item) => {form.fileTypes.push(item.name)})form.fileTypes.unshift('全选')} else {form.fileTypes = []}
}const changeSelect = (val) => {if (!val.includes('全选') && val.length === fileTypeList.length) {form.fileTypes.unshift('全选')} else if (val.includes('全选') && (val.length - 1) < fileTypeList.length) {form.fileTypes = form.fileTypes.filter((item) => {return item !== '全选'})}
}const removeTag = (val) => {if (val === '全选') {form.fileTypes = []}
}